Android全面屏状态栏和底部全面屏手势指示条区域适配

Android全面屏状态栏和底部全面屏手势指示条区域适配

React Native 项目，一般顶部状态栏和底部全面屏手势指示条区域不是透明的，看起来很难受。研究了一下这个问题，现在总结一下解决方案。

顶部状态栏

顶部的状态栏可以使用 React Native 提供的 <StatusBar /> 组件实现透明，一般配合react-navigation使用：

<SafeAreaProvider>
  <NavigationContainer>
    <StatusBar
      translucent={true}
      backgroundColor={'transparent'}
      barStyle="dark-content"
    />
    ...
  </NavigationContainer>
</SafeAreaProvider>

底部手势指示条区域

打开 /android/app/src/main/java/包名/MainActivity.java

在 MainActivity.java 中的 MainActivity 类中实现重写 onCreate 方法

import android.os.Bundle;
import androidx.core.view.WindowCompat;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
}

打开 /android/app/src/main/res/values/styles.xml

向 styles.xml 中添加内容

<resources>
  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    <item name="android:windowDisablePreview">true</item>
    <!-- 关键：设置为透明 -->
    <item name="android:navigationBarColor">@android:color/transparent</item>
  </style>
</resources>

效果：

使用 react-native-navigation-bar-color这个库好像也能处理这个问题 效果如下：