跳到主要内容

平台特定代码

在构建跨平台应用程序时，您会希望尽可能多地重用代码。但有时代码差异化会更有意义，例如，您可能希望为 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,
});

在 iOS 上运行时，Platform.OS 将为 ios；在 Android 上运行时，将为 android。

还有一个 Platform.select 方法，给定一个对象，其键可以是 'ios' | 'android' | 'native' | 'default' 之一，它返回当前运行平台最匹配的值。也就是说，如果您在手机上运行，ios 和 android 键将优先。如果这些未指定，将使用 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 上具有绿色背景色，在其他平台上具有蓝色背景色。

因为它接受 any 值，您也可以使用它来返回平台特定的组件，如下所示

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');
}

平台特定扩展名​

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

例如，假设您的项目中有以下文件

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 扩展名，以避免在生产打包中包含未使用的代码，从而减小最终打包大小。