使用react-navigation更改状态栏颜色

Question

我DrawerNavigator在我的应用程序中使用了反应导航.没有任何自定义,Android状态栏为蓝色,而不是黑色.

我试着这样做

StatusBar.setBackgroundColor('#000000');

但它只能工作几秒钟,然后又会变回蓝色.似乎我正在使用的东西将状态栏颜色设置为蓝色.但是,我试图删除所有依赖项并且只保留react-navigation,它仍然会发生,而react-navigation的文档也没有说明这一点.

如何使用react-navigation将状态栏颜色设置为黑色？

Answer 1

我不认为react-navigation和之间存在任何冲突StatusBar,但我认为你应该使用<StatusBar>组件而不是命令式API.很有可能这是由于重新渲染你的应用程序,它只是切换回默认值,组件声明,你确保它不会发生.

<StatusBar backgroundColor='blue' barStyle='light-content' />

每条路线甚至可以有多个,根据路径进行更改.如果要根据用户和使用情况进行更改redux,请在连接的组件中声明并传递backgroundColor.

Answer 2

就像 Aperçu 所说的，react-navigation 和 StatusBar 之间没有冲突。每个屏幕都应该能够在设备的状态栏上设置属性，并且 createNavigationContainer 中定义的容器应该获得状态更改的选项，并在本机应用它们。为整个应用程序的 StatusBar 试试这个。

const AppContent = StackNavigator({
  Home: { screen: HomeScreen },
  Secondary: { screen: SecondaryScreen },
});

const App = () =>
  <View style={{flex: 1}}>
    <StatusBar backgroundColor="blue" barStyle="light-content"/> 
    // style the bar. barStyle is text and icon color od status bar.
   <AppContent />
 </View>;