React Native项目中iOS content inset的正确计算方式

问题根因 #

硬编码固定padding、按设备宽度比例算边距的方案失效，核心是绕开了iOS系统本身已经做好的边距适配逻辑，自己算的边距和系统原生组件（导航栏标题、系统列表项）的默认边矩天然对不上，换个尺寸的机型就会出现偏移。

正确实现路径 #

• 不要自行硬编码固定边距
  你目前在根视图写死padding: 20、取设备宽度5%当边距的方案，没有匹配系统原生的边距规范：iOS端全竖屏设备的标准布局边距为16pt，大屏iPad设备会自动适配为20pt，这个值是和系统控件完全对齐的，无需通过设备尺寸换算。
• 对接RN生态内置的安全区适配能力
  主流导航库、安全区适配库已经完整实现了和iOS原生一致的contentInset计算逻辑，覆盖安全区偏移、导航栏高度适配、TabBar位置适配等场景，直接复用即可，不需要从零手写计算逻辑。
• 开启ScrollView的自动调整属性
  和iOS原生UIScrollView的contentInsetAdjustmentBehavior行为对齐，开启自动调整属性后，组件会自动根据上层导航、安全区的位置计算content inset，不会出现内容偏移、遮挡的问题。

代码示例 #

// 错误实现（边距错位的常见写法）
const Page = () => {
  return (
    <View style={{ padding: 20 }}>
      {/* 页面内容 */}
    </View>
  )
}

// 正确实现
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useHeaderHeight } from '@react-navigation/elements'

const Page = () => {
  // 自动获取系统安全区边距，适配全机型
  const insets = useSafeAreaInsets()
  // 自动获取当前导航栏高度
  const headerHeight = useHeaderHeight()

  return (
    <ScrollView
      // 开启和iOS原生一致的自动content inset调整
      contentInsetAdjustmentBehavior="automatic"
      automaticallyAdjustsScrollIndicatorInsets={true}
      style={{
        // 使用系统标准16pt左右边距，和导航标题完全对齐
        paddingHorizontal: 16,
        // 自动适配顶部安全区偏移
        paddingTop: insets.top,
      }}
      contentOffset={{ y: -headerHeight }}
    >
      {/* 页面内容 */}
    </ScrollView>
  )
}

踩坑提醒：别用Dimensions拿设备宽度自己算比例当边距。苹果设计规范里的边距是固定逻辑像素值，根本不随屏幕宽度线性变化，按比例算出来的边距在小屏SE、大屏iPad上，和系统组件的对齐偏差会非常明显。

对齐效果验证 #

• 页面左右内容的边距，和原生导航栏标题的边距完全对齐，没有错位
• 在不同尺寸iPhone（含iPhone 11、12 Pro这类边框、宽度有差异的机型）、iPad上预览时，边距保持统一，不需要针对单机型硬编码适配值
• 滚动页面时，内容不会被导航栏、底部TabBar遮挡，滚动指示器的位置和原生App的表现一致

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