导航栏和状态栏在某些设备上不完全透明

Question

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

透明状态栏

我尝试了 Stack Overflow 上建议的许多方法，但没有一个完全有效。我什至设法让它在原生 Android 应用程序上运行，但在反应原生应用程序中编写相同的代码不起作用。

这是我当前的代码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 强制实施对比的方式是向状态栏和导航栏添加半透明背景，这不是我认为的工作方式。将这些值设置为false即可达到目的。

另外，根据本文，您应该添加以下行来MainActivity.java获取状态和导航视图后面的内容：

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

    super.onCreate(savedInstanceState);
  }

确保重写正确的onCreate函数，因为不会调用 React Native 中的默认重写函数。