android - NavigationBar 和 StatusBar 在某些设备上不完全透明

Question

我正在使用 react-native 编写一个应用程序，我试图在状态栏和导航栏后面显示内容。我设法通过添加一些代码 styles.xml 来解决这个问题。这设法解决了我的问题，但我最近意识到它并不适用于所有设备。在我运行 Android 12 的 Pixel 6 上，状态栏和导航栏不是完全透明的。

Transparent status bar

我尝试了 Stack Overflow 上的许多建议，但没有一个能完全奏效。我什至设法让它在 native android 应用程序上运行，但是在 react-native 应用程序中编写相同的代码是行不通的。

这是我目前在 styles.xml 中的代码:

    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>

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

    <item name="android:enforceStatusBarContrast"  tools:targetApi="q">true</item>
    <item name="android:enforceNavigationBarContrast"  tools:targetApi="q">true</item>

Answer 1

我找到了这个问题的解决方案。正如 Eugen Pechance 所指出的，我原来的 styles.xml 的前两行是不必要的。然而，导致半透明背景的主要原因是 android:enforceStatusBarContrast 和 android:enforceNavigationBarContrast 行。 android 强制执行 contras 的方式是将半透明背景添加到状态和导航栏，这不是我认为的工作方式。将这些值设置为 false 即可。

此外，根据 this文章中，您应该将以下行添加到 MainActivity.java 以获取状态和导航 View 后面的内容:

@Override
  public void onCreate(@Nullable Bundle savedInstanceState) {
    WindowCompat.setDecorFitsSystemWindows(getWindow(), false);

    super.onCreate(savedInstanceState);
  }

确保覆盖正确的 onCreate 函数，因为 react native 中的默认覆盖函数不会被调用。