Expo打包APK后含React Navigation的应用启动显示空白屏求助

你遇到的这个问题我之前也碰到过几次，大概率是依赖兼容或者打包配置的问题，咱们一步步来排查解决：

1. 先调整NavigationContainer的层级，去掉多余的外层View #

你的App.js里把NavigationContainer嵌套在了一个View里，虽然开发环境可能没问题，但打包后可能因为布局优先级的问题导致渲染异常。NavigationContainer本身就是一个占满全屏的容器组件，直接返回它就行：

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Home from "./screens/Home";
import About from './screens/About';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='Home'>
        <Stack.Screen component={Home} name="Home"/>
        <Stack.Screen component={About} name="About"/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 关闭新架构（New Architecture） #

你的app.json里开启了newArchEnabled: true，目前React Navigation的部分版本对新架构的适配还不够完善，很容易因为兼容性问题出现空白屏。先把这个选项改成false：

"newArchEnabled": false,

3. 用Expo官方命令重新安装依赖，避免版本冲突 #

你之前用npm install安装了react-native-screens和react-native-safe-area-context，但Expo项目最好用expo install来安装依赖，它会自动匹配当前Expo SDK对应的兼容版本，手动npm安装很容易出现版本不匹配的情况：

expo install react-native-screens react-native-safe-area-context

4. 查看设备运行时日志，定位具体错误 #

如果上面的方法都没用，那就要找到具体的错误信息了。可以用安卓的adb工具查看设备的日志：

1. 把手机连到电脑，开启USB调试
2. 运行命令过滤错误日志：

adb logcat *:E

启动空白屏的应用后，就能看到具体的报错信息，比如某个模块找不到、未捕获的异常等，这样就能精准定位问题了。

5. 临时关闭代码混淆，排除压缩导致的问题 #

可以在eas.json的preview profile里关闭代码压缩，看看是不是混淆导致的导航模块出错：

"preview": {
  "android": {
    "buildType": "apk",
    "minify": false,
    "proguard": false
  },
  "distribution": "internal"
}

按照上面的步骤逐一尝试，应该能解决空白屏的问题。如果还是不行，把adb日志里的错误信息贴出来，就能进一步排查了~

内容来源于stack exchange