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

Question

我在我的应用程序中使用来自 react-navigation 的 DrawerNavigator 。没有任何自定义，Android 状态栏是蓝色的，而不是黑色的。

我试着做

StatusBar.setBackgroundColor('#000000');

但它只工作几秒钟，然后又变回蓝色。似乎我正在使用的东西将状态栏颜色设置为蓝色。但是，我尝试删除所有依赖项并仅保留 react-navigation，但它仍然会发生，并且 react-navigation 的文档对此没有任何说明。

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

原文由 Arnaud 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

您甚至可以在每条路线上有多个路线，以根据路径进行更改。如果您想根据用户更改它并使用 redux ，请在连接组件中声明它并传递 backgroundColor 。

原文由 Preview 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您是否尝试设置 DrawerNavigator 配置？ Doc 说 contentOptions 允许您自定义抽屉内容。

在您定义 DrawerNavigator 的文件中，也许是您的 router.js 文件。您应该将您的导航器创建为：

 const MyApp = DrawerNavigator({
    Home: {
        screen: MyHomeScreen,
        contentOptions: {
            inactiveBackgroundColor: '#000000',
        }
   },
});

也许这个页面会帮助你： DrawerNavigator

目前，您的抽屉肯定会在某个时候重新渲染，这就是颜色返回蓝色的原因。

原文由 ElFreddy 发布，翻译遵循 CC BY-SA 3.0 许可协议