React Native/Expo Android底部黑色控制栏移除及沉浸式模式实现咨询

可以移除Android底部的黑色控制栏，也能修改它的颜色消除黑色效果，不管是用Expo还是原生React Native都能实现，不需要额外复杂的原生开发。

Expo 实现步骤 #

Expo提供了封装好的API，直接调用即可：

• 启用沉浸式/全屏模式：使用expo-system-ui库控制系统UI，安装后可让控制栏隐藏（滑动时临时唤起）或完全隐藏。
  示例代码：

  import { SystemUI } from 'expo-system-ui';
  import { useEffect } from 'react';
  
  useEffect(() => {
    // 完全沉浸式：控制栏隐藏，从边缘滑动可临时显示
    SystemUI.setImmersiveModeAsync(SystemUI.ImmersiveMode.FULL);
    
    // 若只想消除黑色效果、不需要隐藏，直接修改导航栏颜色
    SystemUI.setBackgroundColorAsync('#f0f0f0'); // 设置为你想要的颜色
    SystemUI.setNavigationBarStyleAsync('dark'); // 配套设置图标文字样式，保证可读性
  }, []);
  

  可选的沉浸式模式还有STICKY——控制栏显示后会自动隐藏，适合需要临时操作的场景。

React Native 原生项目实现步骤 #

如果是原生React Native项目，有两种思路：

1. 通过配置和API隐藏/修改控制栏
   • 先在android/app/src/main/AndroidManifest.xml里修改Activity主题：

     <activity
       android:name=".MainActivity"
       android:theme="@style/Theme.App.Fullscreen">
     

   • 在android/app/src/main/res/values/styles.xml中定义全屏主题：

     <style name="Theme.App.Fullscreen" parent="Theme.AppCompat.Light.NoActionBar">
       <item name="android:windowFullscreen">true</item>
       <item name="android:windowTranslucentNavigation">true</item> <!-- 透明导航栏 -->
     </style>
     

   • 在RN代码中补充控制：

     import { StatusBar, Platform } from 'react-native';
     import { useEffect } from 'react';
     
     useEffect(() => {
       if (Platform.OS === 'android') {
         StatusBar.setTranslucent(true);
         // 若需要更灵活的沉浸式控制，可使用第三方库react-native-immersive
         // 比如：import Immersive from 'react-native-immersive'; Immersive.on();
       }
     }, []);
     

2. 仅修改黑色效果
   不需要隐藏控制栏的话，直接用RN内置API修改颜色：

   import { StatusBar, Platform } from 'react-native';
   
   useEffect(() => {
     if (Platform.OS === 'android') {
       StatusBar.setNavigationBarColor('#ffffff'); // 设置自定义颜色
       StatusBar.setNavigationBarStyle('dark'); // 适配图标文字颜色
     }
   }, []);
   

注意事项 #

• 系统版本限制：沉浸式模式支持Android 4.4（API 19）及以上，透明导航栏需要Android 5.0（API 21）及以上。
• 用户体验：完全隐藏控制栏可能让用户找不到返回、主页按钮，建议优先使用粘性沉浸式或透明栏方案，平衡功能和体验。

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