react-native系列(17)API篇：Platform平台差异化加载

Platform模块用于区分移动设备的操作系统及api版本，另外，还可以根据不同平台的后缀扩展名自动识别并装载组件。

系统区分

要检测当前设备是什么操作系统，可以使用：

const os = Platform.OS; // android|ios 

要获取版本，可以使用：

const version = Platform.Version;

后缀扩展名

当不同平台的代码逻辑较为复杂时，最好是放到不同的文件里，这时候我们可以使用后缀扩展名写法。React Native 会检测某个文件是否具有.ios.或是.android.的扩展名，然后根据当前运行的平台自动加载正确对应的文件。

Comp.android.js
Comp.ios.js

在请求这类组件时，可以使用import或require：

// 引用方式一
import CompFromExpansionName from './Comp';
// 引用方式二
const CompFromExpansionName = require('./Comp').default;

Platform.select函数

如果不使用后缀扩展名或不同系统下需要加载不同组件时，可以通过Platform.select函数来实现：

const CompFromPlatfromSelect = Platform.select({
    ios: () => require('./CompIOS'), // ios系统加载CompIOS组件
    android: () => require('./CompAndroid') // android系统加载CompAndroid组件
})().default;

贴上代码：

import React, { Component } from 'react';
import { View, Text, Platform } from 'react-native';

class PlatformAPI extends Component { 

    constructor(props) {
        super(props);
        this.state = { os: '', version: '' };
    }

    componentDidMount() {
        const os = Platform.OS; // android or ios
        const version = Platform.Version; // 版本
        this.setState({os, version});
    }

    render() {
        // 后缀扩展名
        const CompFromExpansionName = require('./Comp').default;
        // Platform.select函数
        const CompFromPlatfromSelect = Platform.select({
            ios: () => require('./CompIOS'),
            android: () => require('./CompAndroid')
        })().default;

        return (
            <View>
                <Text>os:{this.state.os}</Text>
                <Text>version:{this.state.version}</Text>
                <Text>自动根据不同的系统装载不同的组件：</Text>
                <CompFromExpansionName />
                <CompFromPlatfromSelect />
            </View>
        );
    }
}

export default PlatformAPI;

效果：