ios - 在 React Native 中使用嵌套导航更改所有屏幕的状态栏颜色的最佳方法是什么？

Question

我目前正在使用 Expo 和 React Navigation 为我的应用程序在深色主题和浅色主题之间切换。唯一的问题是我无法根据主题更改 iOS 上的状态栏颜色。

我有一个 Tab Navigator 嵌套在 Drawer Navigator 中，但是当我在嵌套导航中切换所有屏幕的主题时，我无法弄清楚如何更改 iOS 上的状态栏颜色。这就是我的抽屉导航器的一部分。

 <themeContext.Provider value={themeData}>
    <NavigationContainer theme={theme == 'Light' ? CustomDefaultTheme : CustomDarkTheme}>
      <Drawer.Navigator
        screenOptions={{
          headerShown: false,
          swipeEdgeWidth: 0,
          drawerActiveBackgroundColor: '#e8e4f0',
          drawerActiveTintColor: '#8a76b6',
          drawerInactiveBackgroundColor: 'transparent',
          drawerInactiveTintColor: '#bcbcc1',

        }}

Answer 1

你可以使用 react-native 的 StatusBar 方法来改变它的背景或 barStyle -

StatusBar.setBarStyle(theme == 'Light' ? 'dark-content' : 'light-content');
StatusBar.setBackgroundColor(theme == 'Light' ? '#fff' : '#000')

更改主题时调用上述函数。

如果你想改变所有屏幕的状态栏背景，你可以从根组件改变它的另一种方法，那么你可以这样做 -

import { SafeAreaView, StatusBar } from 'react-native'

...
<SafeAreaView style={{flex: 1}}>
  <StatusBar
      backgroundColor={theme == 'Light' ? '#fff' : '#000'}
      barStyle={theme == 'Light' ? 'dark-content' : 'light-content'}
  />
  <ThemeContext.Provider value={themeData}>
    <NavigationContainer theme={theme == 'Light' ? CustomDefaultTheme : CustomDarkTheme}>
       <Drawer.Navigator
         screenOptions={{
           ...
         }}>
        ...
      </Drawer.Navigator>
    </NavigationContainer>
  </ThemeContext.Provider>
</SafeAreaView>