平台特定代码
在构建跨平台应用时,你会希望尽可能多地重用代码。但有时代码差异化是有意义的,例如你可能希望为 Android 和 iOS 实现不同的视觉组件。
React Native 提供了两种方式来组织你的代码并按平台区分:
- 使用
Platform
模块。 - 使用 平台特定文件扩展名。
某些组件可能具有仅在一个平台上起作用的属性。所有这些属性都标有 @platform
,并在网站上它们旁边有一个小徽章。
Platform 模块
React Native 提供了一个模块来检测应用运行所在的平台。你可以使用此检测逻辑来实现平台特定代码。当组件中只有一小部分是平台特定时,请使用此选项。
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'
之一,并返回最适合当前运行平台的值。也就是说,如果你在手机上运行,ios
和 android
键将优先。如果这些键未指定,则将使用 native
键,然后是 default
键。
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 上具有绿色背景,在其他平台上具有蓝色背景。
由于它接受 any
值,你还可以使用它来返回平台特定的组件,如下所示
const Component = Platform.select({
ios: () => require('ComponentIOS'),
android: () => require('ComponentAndroid'),
})();
<Component />;
const Component = Platform.select({
native: () => require('ComponentForNative'),
default: () => require('ComponentForWeb'),
})();
<Component />;
检测 Android 版本Android
在 Android 上,Platform
模块还可以用于检测应用运行所在的 Android 平台的版本。
import {Platform} from 'react-native';
if (Platform.Version === 25) {
console.log('Running on Nougat!');
}
注意:Version
设置为 Android API 版本,而不是 Android 操作系统版本。要查找映射关系,请参阅Android 版本历史。
检测 iOS 版本iOS
在 iOS 上,Version
是 -[UIDevice systemVersion]
的结果,这是一个包含当前操作系统版本的字符串。系统版本的示例是“10.3”。例如,要检测 iOS 上的主版本号
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.
扩展名,并在其他组件需要时加载相关的平台文件。
例如,假设你的项目中包含以下文件
BigButton.ios.js
BigButton.android.js
然后你可以按如下方式导入组件
import BigButton from './BigButton';
React Native 将根据运行平台自动选择正确的文件。
原生特定扩展名(即与 NodeJS 和 Web 共享代码)
当一个模块需要在 NodeJS/Web 和 React Native 之间共享,但没有 Android/iOS 差异时,你也可以使用 .native.js
扩展名。这对于 React Native 和 ReactJS 之间共享通用代码的项目特别有用。
例如,假设你的项目中包含以下文件
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
扩展名的情况下导入它,如下所示
import Container from './Container';
专业提示: 配置你的 Web 打包器以忽略 .native.js
扩展名,从而避免在生产包中包含未使用的代码,进而减小最终打包大小。