iOS端React Native Drawer导航器上方状态栏颜色修改及全局设置

一、修复iOS端Drawer导航器上方白色间隙 #

你看到的白色间隙是**状态栏（StatusBar）**与Drawer头部区域的适配问题，结合你的代码按以下步骤修改：

1. 修改StatusBar背景色
   将当前StatusBar的backgroundColor从#fff替换为目标红色#C8102E，保留translucent={true}让内容可延伸至状态栏下方：

<StatusBar backgroundColor="#C8102E" barStyle="light-content" translucent={true} />

2. 适配Drawer头部顶部内边距
   iOS状态栏高度不固定，建议用useSafeAreaInsets获取准确高度，避免硬编码：

• 先导入依赖：

import { useSafeAreaInsets } from 'react-native-safe-area-context';

• 在CustomDrawerContent中获取状态栏高度并调整头部内边距：

const CustomDrawerContent = (props) => {
  const insets = useSafeAreaInsets();
  return (
    <DrawerContentScrollView {...props}>
      <View style={[styles.header, { paddingTop: insets.top + 20 }]}>
        {/* 原有头部内容保持不变 */}
      </View>
      <DrawerItemList {...props} />
    </DrawerContentScrollView>
  );
};

若不想引入额外依赖，也可通过Platform判断设置内边距（需先导入Platform）：

// styles中修改header的paddingTop
header: {
  backgroundColor: '#C8102E',
  padding: 20,
  paddingTop: Platform.OS === 'ios' ? 60 : 40,
},

3. 补全Drawer容器背景色（可选）
   若仍有残留间隙，给Drawer.Navigator添加容器背景色：

const HomeDrawerNavigator = () => (
  <Drawer.Navigator
    initialRouteName="GalleryScreen"
    drawerContent={(props) => <CustomDrawerContent {...props} />}
    sceneContainerStyle={{ backgroundColor: '#C8102E' }}
  >
    {/* 原有屏幕配置不变 */}
  </Drawer.Navigator>
);

二、全局设置所有屏幕的导航栏颜色 #

React Navigation支持全局配置导航样式，无需逐个屏幕重复设置：

1. Stack导航器全局配置 #

在最外层Stack.Navigator的screenOptions中统一设置，所有Stack内的屏幕会自动继承：

<Stack.Navigator
  initialRouteName="Login"
  screenOptions={{
    headerStyle: {
      backgroundColor: '#C8102E', // 全局红色导航栏
    },
    headerTintColor: '#fff', // 全局白色文字/图标
    headerShown: true, // 默认显示导航栏，需隐藏的屏幕单独设置headerShown:false
  }}
>
  {/* 示例：Login屏幕单独隐藏导航栏 */}
  <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
  {/* 其他屏幕无特殊需求时，无需重复写headerStyle */}
</Stack.Navigator>

2. Drawer导航器内屏幕全局配置 #

若Drawer内的屏幕需要独立全局样式，在Drawer.Navigator中设置screenOptions：

<Drawer.Navigator
  initialRouteName="GalleryScreen"
  drawerContent={(props) => <CustomDrawerContent {...props} />}
  screenOptions={{
    headerStyle: { backgroundColor: '#C8102E' },
    headerTintColor: '#fff',
  }}
>
  {/* Drawer内屏幕自动继承该样式 */}
</Drawer.Navigator>

3. 全App导航样式全局覆盖 #

若要让整个App的所有导航栏（包括Stack和Drawer）统一样式，可在NavigationContainer的theme属性中配置：

<NavigationContainer
  theme={{
    colors: {
      primary: '#C8102E', // 导航栏背景色
      text: '#fff', // 导航栏文字颜色
    },
  }}
>
  {/* 原有导航器内容不变 */}
</NavigationContainer>

注意：theme配置会覆盖默认导航样式，需确保与自定义样式兼容。

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