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

你的名字 2021-09-18 11:06 626阅读 0赞

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;

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70]: /images/20210812/fc12d134105f48b49794258d55531ac3.png