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;
效果:
还没有评论,来说两句吧...