React Native安卓端实现真正全屏（隐藏状态栏导航栏）方案咨询

原生端配置（必做，未配置会导致JS层修改失效） #

• 修改android/app/src/main/res/values/styles.xml中的App主题，添加全屏适配属性：

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- 隐藏系统ActionBar -->
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <!-- 允许内容延伸到状态栏、导航栏、刘海/挖孔区域 -->
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <!-- 状态栏、导航栏背景完全透明 -->
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>
</style>

• 修改android/app/src/main/AndroidManifest.xml，给MainActivity节点添加属性：

<activity
  android:name=".MainActivity"
  android:theme="@style/AppTheme"
  android:fitsSystemWindows="false"
  <!-- 其余原有配置保持不变 -->
>

• 修改android/app/src/main/java/[你的包名路径]/MainActivity.java，添加沉浸模式配置：

import android.view.View;
import android.os.Bundle;

public class MainActivity extends ReactActivity {
  // 原有代码保持不变，新增以下方法
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      hideSystemUI();
  }

  @Override
  public void onWindowFocusChanged(boolean hasFocus) {
      super.onWindowFocusChanged(hasFocus);
      if (hasFocus) {
          hideSystemUI();
      }
  }

  private void hideSystemUI() {
      View decorView = getWindow().getDecorView();
      decorView.setSystemUiVisibility(
          View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
          | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
          | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
          | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
          | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
          | View.SYSTEM_UI_FLAG_FULLSCREEN);
  }
}

JS层配置 #

• 根布局设置flex: 1占满全屏，不要添加顶部/底部内边距，直接隐藏StatusBar即可：

import { View, StatusBar } from 'react-native';

export default function App() {
  return (
    <View style={{flex: 1, backgroundColor: 'red'}}>
      <StatusBar hidden />
      {/* 此处放置自定义全屏内容 */}
    </View>
  )
}

• 无需额外引入第三方系统栏控制库，原生配置完成后JS层设置即可完全生效。

注意事项 #

• 修改原生配置后需要重新执行npx react-native run-android打包生效，热更新不会同步原生修改。
• 滑动屏幕边缘时系统会临时调出状态栏/导航栏，几秒后会自动隐藏，属于安卓粘性沉浸模式的默认行为。

内容的提问来源于stack exchange，提问作者austinNewcome