React Native嵌套导航下如何统一修改所有页面iOS端Status Bar颜色

你可以通过以下两种方案实现全页面iOS状态栏颜色随主题动态切换，无需逐个给嵌套页面配置：

方案1：全局挂载StatusBar组件（最简方案，适配所有嵌套导航） #

直接在根组件的themeContext Provider下挂载StatusBar组件，将其barStyle属性和当前主题绑定即可，全局生效不受导航嵌套层级影响：

import { StatusBar } from 'expo-status-bar'; // 若使用React Native自带StatusBar引入对应包即可

// ...其余原有代码
<themeContext.Provider value={themeData}>
  {/* 新增全局状态栏配置，和主题状态绑定 */}
  <StatusBar style={theme == 'Light' ? 'dark' : 'light'} />
  <NavigationContainer theme={theme == 'Light' ? CustomDefaultTheme : CustomDarkTheme}>
    <Drawer.Navigator
      screenOptions={{
        headerShown: false,
        swipeEdgeWidth: 0,
        drawerActiveBackgroundColor: '#e8e4f0',
        drawerActiveTintColor: '#8a76b6',
        drawerInactiveBackgroundColor: 'transparent',
        drawerInactiveTintColor: '#bcbcc1',
      }}
    >
    {/* 原有导航内容 */}
    </Drawer.Navigator>
  </NavigationContainer>
</themeContext.Provider>

该方案不需要修改任何导航内部配置，主题切换时状态栏会自动同步样式。

方案2：通过React Navigation主题配置状态栏 #

如果你不想额外引入全局StatusBar，也可以在自定义主题的配置里增加状态栏样式配置，同时给Drawer.Navigator的screenOptions补充statusBarStyle属性：

• 先修改你的CustomDefaultTheme和CustomDarkTheme，补充对应状态栏样式：

const CustomDefaultTheme = {
  ...DefaultTheme,
  // 其余原有主题配置
  statusBarStyle: 'dark',
}

const CustomDarkTheme = {
  ...DarkTheme,
  // 其余原有主题配置
  statusBarStyle: 'light',
}

• 再修改Drawer.Navigator的screenOptions，绑定主题的statusBarStyle：

<Drawer.Navigator
  screenOptions={({ theme }) => ({
    headerShown: false,
    swipeEdgeWidth: 0,
    drawerActiveBackgroundColor: '#e8e4f0',
    drawerActiveTintColor: '#8a76b6',
    drawerInactiveBackgroundColor: 'transparent',
    drawerInactiveTintColor: '#bcbcc1',
    // 新增状态栏配置，自动读取当前导航主题的样式
    statusBarStyle: theme.statusBarStyle,
  })}
>

两种方案都可以覆盖所有嵌套的Tab、Stack页面的状态栏样式，不需要单独给子页面重复配置。

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