平台差异处理

这一课你将能做到

1. 用 Platform.OS 和 Platform.select 写出 iOS / Android 各自得体的样式和逻辑分支
2. 用 SafeAreaView 正确处理刘海屏、底部 Home 指示条，并配置两端状态栏
3. 处理阴影、返回行为、平台专属文件这几类最常见的双端差异

为什么要学

RN 号称「一套代码两端跑」，但不是「一套代码两端长得一模一样」。iOS 和 Android 是两套设计语言：iOS 导航栏标题居中、靠右滑手势返回；Android 标题靠左、有系统返回键。iOS 的阴影可以调颜色调模糊，Android 的阴影只有一个「海拔」数字。你不主动处理这些差异，App 总有一端看起来「不对劲」——用户说不上来哪里怪，但会觉得这 App 不精致。

人话：同一份简历投不同公司要微调措辞，同一份代码也要按平台微调表现——90% 的逻辑共用，10% 的细节差异化。这一课就是教你那 10% 怎么处理得优雅，而不是写一堆 if-else 把代码搞成意大利面。

先建立图像

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

export default function App() {
  return (
    <View style={styles.header}>
      <Text style={styles.title}>当前平台：{Platform.OS}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    paddingTop: Platform.OS === 'ios' ? 60 : 40,  // iOS 刘海区域更高
    backgroundColor: '#007bff',
    alignItems: Platform.OS === 'ios' ? 'center' : 'flex-start', // 标题 iOS 居中，Android 靠左
    paddingHorizontal: 16,
    paddingBottom: 12,
  },
  title: { color: '#fff', fontSize: 18 },
});

同一份代码，iOS 上标题居中且顶部留白更多，Android 上标题靠左。Platform.OS 就是这一切分支的起点，它的值是字符串：'ios'、'android'、'web'。

平台差异的四层处理手段，从轻到重：

样式小差异 → Platform.OS 三元 / Platform.select
组件结构差异 → 条件渲染 {Platform.OS === 'ios' && <IOSOnlyView />}
整块实现差异 → 平台专属文件 MyButton.ios.js / MyButton.android.js
系统能力差异 → Expo 模块内部已抹平（如 expo-haptics 两端震动）

跟着做

步骤 1：Platform.OS 条件判断

import { Platform } from 'react-native';

if (Platform.OS === 'ios') {
  // iOS 专属逻辑
} else if (Platform.OS === 'android') {
  // Android 专属逻辑
}

// 还能拿到系统版本号，做更细的判断
console.log(Platform.Version); // iOS 是字符串 '17.2'，Android 是 API 数字 34

典型用途：iOS 14 以下不支持某个特性时降级处理，Android 低版本关掉某个动画。

步骤 2：Platform.select 优雅写样式

样式分支多了，三元表达式会很难看，Platform.select 是声明式的写法：

const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.select({ ios: 60, android: 40, default: 20 }),
    fontFamily: Platform.select({ ios: 'System', android: 'Roboto' }),
  },
});

它比三元表达式清晰，还多了 default 兜底（Web 端命中）。它也能返回任意值，不只数字：