时间戳

首页 > 解决方案 > React Native：Android windowLightNavigationBar 不更改按钮颜色

android - React Native：Android windowLightNavigationBar 不更改按钮颜色

问题描述

在我的 react-native 应用程序中，我想将底部导航栏颜色更改为白色。通过将以下行添加到我的src/main/res/value/styles.xml文件中，我能够将颜色更改为白色。

 <item name="android:navigationBarColor">@android:color/white</item>

但是当我在模拟器或物理设备上运行它时。它显示如下。我想让底部导航栏中的按钮突出显示，以便用户可以清楚地看到这些按钮。

实际输出

导航栏图片

预期产出

在此处输入图像描述

到目前为止我做了什么

  1. 尝试添加 <item name="android:windowLightNavigationBar">true</item>到 styles.xml 文件。
  2. 尝试通过创建文件夹并添加这里values-28提到的 styles.xml 文件。
  3. 尝试更改parent="Theme.AppCompat.Light.NoActionBar为 parent="Theme.AppCompat.DayNight.NoActionBar
  4. 尝试创建一个新的模拟器，如此 处所述
  5. 这个也试过了。

但他们似乎都没有解决我的问题。

我的styles.xml文件看起来像这样。

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:windowLightNavigationBar">true</item>
    <item name="android:navigationBarColor">@android:color/white</item>

</style>

build.gradle看起来像这样。

    buildToolsVersion = "29.0.3"
    compileSdkVersion = 29
    minSdkVersion    = 27
    targetSdkVersion = 29
    supportLibVersion = "28.0.0"

我已经在以下设备上进行了测试

  1. 像素 4 API 30（模拟器）
  2. Pixel 3A XL API 27（模拟器）
  3. Redmi Note 7（物理设备 - Android 10）
  4. Mi Note 10 Lite（物理设备 - Android 10）

任何帮助，将不胜感激。

标签： androidreact-nativeandroid-layoutreact-native-android

解决方案

也尝试添加这一行。

<item name="android:windowDrawsSystemBarBackgrounds">true</item>

推荐阅读