使用React Native Navigation时顶部出现白色空白如何修改该区域颜色

• 你观察到的顶部白色空白不是页面布局产生的留白，是React Navigation Stack导航器默认渲染的顶部导航栏组件。
• 该导航栏拥有独立的样式规则，默认背景为纯白色，和你给页面根View设置的#44210D背景属于相互独立的样式层级，不会继承页面的背景色，因此哪怕页面主区域为深棕色，导航栏依然会保持默认白色，形成视觉上的突兀空白块。

你可以根据自身页面的设计需求，选择两种适配方式：

方案1：保留导航栏，修改背景色匹配页面风格 #

直接在MainNavigator.Navigator的全局配置参数screenOptions中，自定义导航栏的内置样式，将其背景色设置为和页面容器一致的#44210D，替换原有代码中无配置的Navigator标签：

<MainNavigator.Navigator 
  screenOptions={{
    // 修改导航栏整体背景色
    headerStyle: {
      backgroundColor: '#44210D',
    },
    // 适配深色背景下的导航栏元素颜色，避免文字、返回按钮和背景对比度太低无法识别
    headerTintColor: '#ffffff',
    headerTitleStyle: {
      fontWeight: 'bold',
    }
  }}
>

修改完成后，顶部导航栏的颜色就会和页面主区域完全统一，不会出现突兀的白色块。

方案2：不需要默认导航栏时，直接隐藏顶部头部 #

如果你的页面设计本身不需要系统自带的导航栏，可以直接在screenOptions中配置隐藏头部，让页面内容占满状态栏下方的全部可视区域：

<MainNavigator.Navigator 
  screenOptions={{
    headerShown: false
  }}
>

这种模式下，顶部不会渲染任何导航栏组件，你的页面容器设置的#44210D背景会完全延伸到可视区域顶部，自然不存在白色空白块。

补充提示：如果修改导航栏/隐藏导航栏后，发现顶部系统状态栏的文字、图标颜色和新背景不匹配，可以单独引入StatusBar组件配置状态栏的内容样式，比如在深色背景下设置barStyle="light-content"让状态栏文字显示为白色，提升视觉协调性。

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