React Native App在不同iOS设备上设计显示不一致该如何解决？

两类设备的显示差异本质是**非全面屏iOS设备（iPhone 6~8系列）和全面屏iOS设备（iPhone X~13系列）**的系统设计规范差异：前者为16:9屏幕比例，顶部状态栏高度固定20pt，无底部安全避让区；后者为19.5:9屏幕比例，顶部状态栏高度44pt，底部存在34pt的Home指示条避让区，未做对应适配就会出现两组设备显示不一致的问题。

• 全局页面优先使用官方SafeAreaView作为根容器
  直接替换原有页面的根View组件为SafeAreaView，组件会自动根据设备类型适配顶部、底部的安全边距，避免内容被刘海、底部指示条遮挡，无需手动计算边距：

  import { SafeAreaView, StyleSheet, View, Text } from 'react-native';
  
  export default function App() {
    return (
      <SafeAreaView style={styles.root}>
        {/* 原有页面内容 */}
        <View>
          <Text>页面内容</Text>
        </View>
      </SafeAreaView>
    )
  }
  
  const styles = StyleSheet.create({
    root: {
      flex: 1,
      backgroundColor: '#ffffff'
    }
  })
  

• 自定义场景用动态安全边距钩子
  如果你需要自行控制边距规则，可通过useSafeAreaInsets钩子动态获取当前设备的各边安全边距，灵活设置：

  import { useSafeAreaInsets } from 'react-native-safe-area-context';
  import { View, StyleSheet } from 'react-native';
  
  function CustomHeader() {
    const insets = useSafeAreaInsets();
    return (
      <View style={[styles.header, { paddingTop: insets.top + 10 }]}>
        {/* 头部内容 */}
      </View>
    )
  }
  
  const styles = StyleSheet.create({
    header: {
      height: 44,
      width: '100%',
      backgroundColor: '#f5f5f5'
    }
  })
  

• 元素尺寸优先用自适应规则
  不要硬写固定pt数值作为元素宽高，优先使用flex布局实现自适应，必须固定尺寸的场景按照屏幕宽度比例换算：

  import { Dimensions } from 'react-native';
  // 取当前设备屏幕可视宽度，设计稿基准宽度按375pt计算
  const screenWidth = Dimensions.get('window').width;
  // 设计稿上100pt宽的元素，换算为当前设备下的实际宽度
  const cardWidth = screenWidth * 100 / 375;
  

• 特殊适配场景可做设备类型判断
  若存在仅针对两类设备单独调整的样式需求，可通过状态栏高度快速判断是否为全面屏iOS设备：

  import { Platform, StatusBar } from 'react-native';
  // iOS设备状态栏高度大于20pt即为全面屏设备
  const isIosFullScreen = Platform.OS === 'ios' && (StatusBar.currentHeight || 0) > 20;
  // 样式中可根据该变量做差异化配置
  const containerPadding = isIosFullScreen ? 20 : 15;
  

内容的提问来源于stack exchange，提问作者Adil Ijaz