更改导航栏颜色

Question

我知道从 API 21 开始就可以更改导航栏的颜色。我已经查看了 React Native 的文档，但我找不到一种方法来做到这一点。

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

有没有内置的方法来做到这一点？

Answer 1

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

反应本机系统导航栏

安装

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

Answer 2

（对于那些使用 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 3

对于react-navigationv6：

navigationbarColor只需在导航器中设置：

screenOptions={{navigationBarColor: 'gold'}}

Answer 4

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

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

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