使用React Navigation抽屉导航时状态栏与应用栏间距过大如何解决

问题原因 #

你遇到的空白是两个高度叠加导致的：

• React Navigation 抽屉导航默认会自动渲染顶部导航栏，该导航栏已经内置了状态栏高度适配逻辑，避免和状态栏重叠
• 你在HomeScreen页面的最外层View上额外加了Constants.statusBarHeight的上边距，两层高度叠加就出现了多余的空白

解决方案（二选一即可） #

方案1：关闭导航自带的顶部导航栏（适合你已经自定义Header组件的场景）

修改app.jsx中的Drawer.Navigator配置，添加headerShown: false属性，关闭默认头部：

// 修改后的app.jsx核心代码
<Drawer.Navigator 
  initialRouteName="Home"
  screenOptions={{
    headerShown: false
  }}
>
  <Drawer.Screen name="Home" component={HomeScreen} />
  <Drawer.Screen name="Vaccine" component={VaccineScreen} />
</Drawer.Navigator>

方案2：保留导航自带的顶部导航栏，去掉页面自定义的边距

如果你打算使用导航自带的头部，直接删除HomeScreen里最外层View的marginTop: Constants.statusBarHeight样式即可：

// 修改后的HomeScreen核心代码
<ScrollView style={styles.main}>
  {/* 去掉原有marginTop样式 */}
  <View>
    <StatusBar style="auto" />
    {/* 其余原有代码保持不变 */}
  </View>
</ScrollView>

修改后重新运行项目即可消除多余的空白间距。

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