更改导航栏颜色

Question

我知道可以从 API 21 开始更改导航栏的颜色。我已经查看了 React Native 的文档，但找不到执行此操作的方法。

我知道的唯一方法是创建一个本机模块，但这似乎不是一个好的解决方案，因为我正在使用 Expo。

是否有内置方法可以做到这一点？

Answer 1

好吧，我制作了一个插件，它完全可以用来实现你想要的。

https://github.com/BhavanPatel/react-native-navbar-color

https://www.npmjs.com/package/react-native-navbar-color

Answer 2

下面是另一种选择。它有最近的提交。

react-native-navigation-bar-color

https://github.com/thebylito/react-native-navigation-bar-color

Answer 3

（对于那些使用 react-native-cli 的人）只需将 <item name="android:navigationBarColor">#0D0D0D</item> 添加到 android/app/src/main/res/values/styles.xml 中的样式，例如：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:textColor">#000000</item>
    <item name="android:navigationBarColor">#0D0D0D</item> <!--  ADD THIS LINE TO YOUR styles.xml    -->
</style>

Answer 4

改变 Android 设备状态栏和导航栏背景颜色的其他可能方法是通过 StatusBar 模块和 NativeModules

我已经post回答了Android关于NaigationBar的问题，你可以查看

Answer 5

我创建了一个包含颜色替换等的包。

react-native-system-navigation-bar

安装

yarn add react-native-system-navigation-bar

或

npm install react-native-system-navigation-bar

链接

https://www.npmjs.com/package/react-native-system-navigation-bar

https://github.com/kadiraydinli/react-native-system-navigation-bar

更改导航栏颜色

Change navigation bar color

react-native

expo