解决:React Native 中常见的 状态栏遮挡内容

React Native 中常见的 状态栏遮挡内容（状态栏和 App 顶部内容重叠）。

导致这个问题的原因

✅ 多数 Android 手机：

• 默认 StatusBar 是不透明的（translucent: false）。
• SafeAreaView + flex: 1 就已经可以避免状态栏重叠。

❗ 但有些 Android 手机上：

• 状态栏默认是半透明的（translucent: true）

这个通常是因为没有正确处理 SafeAreaView 或 Android 上没有设置合适的 padding/margin 来避开状态栏区域。

1. 显式设置 translucent 为 false

<StatusBar
  translucent={false} // 关键：禁用沉浸式状态栏
  ...
/>

translucent 设置为 false, 对于有的手机系统无效, 还是有可能会有重叠的情况发生.

2. 使用 paddingTop 手动避开状态栏（保险）

• 显示的设置 translucent 为 true
• 在下面的全屏区域设置一个 paddingTop: StatusBar.currentHeight

  <StatusBar
    translucent={false} // 解决状态栏内容重叠
...
  />
  <View style={[{ paddingTop: StatusBar.currentHeight || 21 }]}>
    {/* 主内容区域 */}
  </View>