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

Question

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

Transparent status bar

我尝试了 Stack Overflow 上建议的许多方法，但 none 其中完全有效。我什至设法让它在原生 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 的前两行是不必要的。但是，导致 half-transparent 背景的主要原因是 android:enforceStatusBarContrast 和 android:enforceNavigationBarContrast 行。 android 强制对比的方式是将 semi-transparent 背景添加到状态和导航栏，这不是我认为的工作方式。将这些值设置为 false 就可以了。

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

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

    super.onCreate(savedInstanceState);
  }

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

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

NavigationBar and StatusBar not fully transparent on some devices

android

statusbar

navigationbar

react-native