更改导航栏颜色

Posted 2023-04-18

【中文标题】更改导航栏颜色

【英文标题】：Change navigation bar color

【发布时间】：2018-02-06 06:11:59

【问题描述】：

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

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

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

【问题讨论】：

你是说状态栏颜色？出现在屏幕顶部？

@BhavanPatel 不，屏幕底部的导航栏。 developer.android.com/reference/android/view/…

【参考方案1】：

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

<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>

【参考方案2】：

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

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

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

【讨论】：

这似乎是我要找的东西！

很乐意为您提供帮助

【参考方案3】：

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

react-native-navigation-bar-color

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

【参考方案4】：

我创建了一个带有颜色替换等功能的包。

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

【参考方案5】：

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

我已经发布了关于Android NaigationBar的答案，你可以查看this