跳至主内容

平台特定代码

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

构建跨平台应用时，您会希望尽可能复用代码。但某些场景下可能需要编写不同平台的代码，例如为 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' 键名的对象时，该方法会返回最适合当前平台的值。在手机设备上，优先匹配 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 />;

Detecting the Android version
Android
​

在 Android 上，Platform 模块还能检测应用运行的 Android 平台版本：

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

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

注意：Version 对应 Android API 版本而非操作系统版本。版本映射关系请参阅 Android 版本历史。

Detecting the iOS version
iOS
​

在 iOS 上，Version 来自 -[UIDevice systemVersion] 返回的当前操作系统版本字符串（例如 "10.3"）。检测主版本号的示例如下：

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 文件，避免生产包包含未使用代码，从而减小最终包体积。