React Native Expo安卓导航栏始终隐藏问题：打包APK后失效求助

1. 校验app.json的完整配置 #

确保app.json里android字段下的导航栏配置完整且正确，必须包含visible: false，同时搭配状态栏的隐藏配置，示例如下：

{
  "expo": {
    "android": {
      "navigationBar": {
        "visible": false,
        "translucent": true
      },
      "statusBar": {
        "hidden": true,
        "translucent": true
      },
      "package": "com.your.app.package"
    }
  }
}

2. 执行预构建并修改原生代码（Expo SDK 47+适用） #

开发环境下的配置可能无法直接同步到打包后的APK，需要生成原生Android项目文件后添加系统级隐藏逻辑：

• 先运行预构建命令：

npx expo prebuild --platform android

• 找到android/app/src/main/java/com/your/app/package/MainActivity.kt（或Java版本的MainActivity.java），添加隐藏导航栏的代码：

Kotlin版本示例： #

import android.os.Bundle
import android.view.View
import com.facebook.react.ReactActivity
import com.facebook.react.defaults.DefaultReactActivityDelegate

class MainActivity : ReactActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // 强制隐藏导航栏并设置沉浸式粘性模式
    window.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
            or View.SYSTEM_UI_FLAG_FULLSCREEN
            or View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY)
  }

  override fun getMainComponentName(): String = "main"

  override fun createReactActivityDelegate() =
      DefaultReactActivityDelegate(this, mainComponentName)
}

Java版本示例： #

import android.os.Bundle;
import android.view.View;
import com.facebook.react.ReactActivity;
import com.facebook.react.defaults.DefaultReactActivityDelegate;

public class MainActivity extends ReactActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // 强制隐藏导航栏并设置沉浸式粘性模式
    getWindow().getDecorView().setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_FULLSCREEN
            | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
  }

  @Override
  protected String getMainComponentName() {
    return "main";
  }

  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new DefaultReactActivityDelegate(this, getMainComponentName());
  }
}

3. 重新打包发布版本APK #

修改完成后，执行打包命令生成正式APK：

npx expo run:android --variant release

4. 额外注意事项 #

• 先更新Expo CLI到最新版本：npm install -g expo-cli
• 优先用真机测试，部分模拟器对系统UI隐藏的兼容性较差
• 若使用React Navigation等第三方导航库，检查是否存在覆盖系统导航栏的配置项

内容的提问来源于stack exchange，提问作者David Gonçalves