React Native安卓底部按键隐藏（全屏）实现方案问询

嘿，我来给你详细讲讲在React Native里实现安卓全屏、隐藏底部导航按键的几种实用方案，都是项目里验证过的：

这种方案适合需要精细控制全屏逻辑的场景，需要修改安卓原生代码并封装RN原生模块：

1. 安卓原生代码修改（自动开启全屏） #

打开安卓项目里的MainActivity.java（如果用Kotlin就是MainActivity.kt），重写onWindowFocusChanged方法：

Java版本： #

@Override
public void onWindowFocusChanged(boolean hasFocus) {
    super.onWindowFocusChanged(hasFocus);
    if (hasFocus) {
        // 配置沉浸模式，隐藏底部导航和状态栏
        getWindow().getDecorView().setSystemUiVisibility(
            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
            | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
        );
    }
}

关键参数说明： #

• SYSTEM_UI_FLAG_IMMERSIVE_STICKY：这是核心，用户滑动屏幕时会临时显示系统UI，松开后自动隐藏，体验更友好；如果用IMMERSIVE（不带STICKY），则需要手动退出全屏。

2. 封装原生模块实现动态控制 #

如果需要在RN组件里随时开启/关闭全屏，就需要封装一个原生模块：

第一步：创建FullScreenModule #

public class FullScreenModule extends ReactContextBaseJavaModule {
    public FullScreenModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "FullScreen"; // 模块名称，RN里会用到
    }

    @ReactMethod
    public void enableFullScreen() {
        Activity activity = getCurrentActivity();
        if (activity != null) {
            activity.runOnUiThread(() -> {
                View decorView = activity.getWindow().getDecorView();
                decorView.setSystemUiVisibility(
                    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
                    | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
                );
            });
        }
    }

    @ReactMethod
    public void disableFullScreen() {
        Activity activity = getCurrentActivity();
        if (activity != null) {
            activity.runOnUiThread(() -> {
                View decorView = activity.getWindow().getDecorView();
                decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
            });
        }
    }
}

第二步：注册模块 #

创建FullScreenPackage类：

public class FullScreenPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new FullScreenModule(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

然后在MainApplication.java里注册这个Package：

@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new FullScreenPackage()); // 添加这一行
    return packages;
}

第三步：RN组件里调用 #

import { NativeModules } from 'react-native';
const { FullScreen } = NativeModules;

// 开启全屏
const handleEnableFullScreen = () => {
  FullScreen.enableFullScreen();
};

// 关闭全屏
const handleDisableFullScreen = () => {
  FullScreen.disableFullScreen();
};

如果不想写原生代码，可以用成熟的第三方库，比如react-native-immersive，它封装了安卓的沉浸模式：

1. 安装库 #

npm install react-native-immersive --save
# 或者用yarn
yarn add react-native-immersive

（RN 0.60+版本会自动链接，无需额外配置）

2. 在RN组件里使用 #

import Immersive from 'react-native-immersive';

// 开启全屏（隐藏导航栏+状态栏）
Immersive.on();

// 仅隐藏底部导航栏（保留状态栏）
Immersive.setImmersive(true);

// 关闭全屏，恢复系统UI
Immersive.off();

• 版本兼容性：IMMERSIVE_STICKY从安卓4.4（API 19）开始支持，如果需要兼容更低版本，要加版本判断。
• 后台切回恢复：应用从后台回到前台时，系统UI可能会恢复，所以可以通过AppState监听来重新开启全屏：

import { AppState } from 'react-native';

AppState.addEventListener('change', (state) => {
  if (state === 'active') {
    // 重新开启全屏
    FullScreen.enableFullScreen();
    // 或者用第三方库：Immersive.on();
  }
});

• 内容不被遮挡：全屏模式下，要确保页面内容不会被系统UI遮挡，可以在安卓的styles.xml里设置android:fitsSystemWindows="false"，或者在RN里避免使用SafeAreaView（如果不需要适配刘海屏）。

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