使用 react-navigation 更改状态栏颜色 [英] Change status bar color with react-navigation

问题描述

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

I use a DrawerNavigator from react-navigation in my app. Without any customization, the Android status bar is blue, and not black.

我尝试过

StatusBar.setBackgroundColor('#000000');

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

but it only works for a few seconds, and then it goes back to blue. It seems that something I am using set the status bar color to blue. However, I tried to remove all dependencies and only keep react-navigation, and it still happens and the docs of react-navigation do not say anything about that.

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

推荐答案

我不认为 react-navigation 和 StatusBar 之间有任何冲突，但我认为您应该使用 组件而不是命令式 API.这很有可能是由于您的应用程序重新呈现，它只是切换回默认设置，并声明了一个组件，您可以确保它不会发生.

I don't think there is any conflict between react-navigation and the StatusBar, but I think you should use the <StatusBar> component rather than the imperative API. There's a high chance this is due to a re-render of your app and it just switch back to the default, with a component declare, you ensure it won't happen.

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

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

You can even have multiple ones per route, to change it depending on the path. If you want to change it depending on the user and using redux, declare it in a connected component and pass the backgroundColor.

这篇关于使用 react-navigation 更改状态栏颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！