跳到主要内容

平台特定代码

在构建跨平台应用时,你会希望尽可能多地重用代码。但也可能出现需要代码不同的场景,例如你可能想为 Android 和 iOS 实现不同的视觉组件。

React Native 提供了两种方式来组织你的代码并按平台区分

某些组件可能具有仅在一个平台生效的属性。所有这些属性都带有 @platform 注释,并且在网站上它们旁边会有一个小徽章。

Platform 模块

React Native 提供了一个模块,用于检测应用正在运行的平台。你可以使用这个检测逻辑来实现平台特定代码。当组件只有小部分是平台特定时,可以使用此选项。

tsx
import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
height: Platform.OS === 'ios' ? 200 : 100,
});

Platform.OS 在 iOS 上运行时将是 ios,在 Android 上运行时将是 android

还有一个 Platform.select 方法可用,给定一个对象,其键可以是 'ios' | 'android' | 'native' | 'default' 之一,它会返回最适合当前运行平台的那个值。也就是说,如果你在手机上运行,iosandroid 键会优先。如果这些未指定,将使用 native 键,然后是 default 键。

tsx
import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
container: {
flex: 1,
...Platform.select({
ios: {
backgroundColor: 'red',
},
android: {
backgroundColor: 'green',
},
default: {
// other platforms, web for example
backgroundColor: 'blue',
},
}),
},
});

这将导致容器在所有平台上都具有 flex: 1,在 iOS 上背景色为红色,在 Android 上背景色为绿色,在其他平台上背景色为蓝色。

由于它接受任何值,你也可以用它来返回平台特定的组件,如下所示

tsx
const Component = Platform.select({
ios: () => require('ComponentIOS'),
android: () => require('ComponentAndroid'),
})();

<Component />;
tsx
const Component = Platform.select({
native: () => require('ComponentForNative'),
default: () => require('ComponentForWeb'),
})();

<Component />;

检测 Android 版本
Android

在 Android 上,Platform 模块也可以用来检测应用运行的 Android 平台版本

tsx
import {Platform} from 'react-native';

if (Platform.Version === 25) {
console.log('Running on Nougat!');
}

注意Version 设置为 Android API 版本,而不是 Android OS 版本。要查找映射关系,请参阅 Android 版本历史

检测 iOS 版本
iOS

在 iOS 上,Version-[UIDevice systemVersion] 的结果,这是一个表示操作系统当前版本的字符串。系统版本的一个示例是“10.3”。例如,要在 iOS 上检测主版本号

tsx
import {Platform} from 'react-native';

const majorVersionIOS = parseInt(Platform.Version, 10);
if (majorVersionIOS <= 9) {
console.log('Work around a change in behavior');
}

平台特定扩展名

当你的平台特定代码更复杂时,你应该考虑将代码拆分到单独的文件中。React Native 会检测文件是否具有 .ios..android. 扩展名,并在其他组件需要时加载相关的平台文件。

例如,假设你的项目中有以下文件

shell
BigButton.ios.js
BigButton.android.js

然后你可以像这样导入组件

tsx
import BigButton from './BigButton';

React Native 会根据运行平台自动选择正确的文件。

原生特定扩展名(即与 NodeJS 和 Web 共享代码)

当模块需要在 NodeJS/Web 和 React Native 之间共享,但没有 Android/iOS 差异时,你也可以使用 .native.js 扩展名。这对于在 React Native 和 ReactJS 之间共享通用代码的项目特别有用。

例如,假设你的项目中有以下文件

shell
Container.js # picked up by webpack, Rollup or any other Web bundler
Container.native.js # picked up by the React Native bundler for both Android and iOS (Metro)

你仍然可以不带 .native 扩展名地导入它,如下所示

tsx
import Container from './Container';

专业提示:配置你的 Web 打包工具以忽略 .native.js 扩展名,以避免在你的生产包中包含未使用的代码,从而减小最终包的大小。