React Native Expo构建APK后显示空白页面问题求助

问题场景 #

应用在Expo Go中运行完全正常，APK构建过程无异常，但安装后先显示字体加载的「Loading...」页面，之后直接变为空白。

相关代码 #

useEffect(() => {
    async function loadFont() {
      await Font.loadAsync({
    [...fonts...]
      });
      setFontLoaded(true);
    }
    loadFont();
  }, []);

  if (!fontLoaded) {
    //console.log("helloooo");
    return <Text>Loading...</Text>
  }

  return (
    <NavigationContainer>
      <Drawer.Navigator 
    [...rest of the code...]

当前困境 #

• 无法查看APK运行后的控制台日志，网上解决方案零散（如降级react-native-reanimated、修改异步函数），但每次构建需1.5小时，无法逐一尝试
• 了解ADB工具可调试，但不知道如何获取和分析错误日志，也不清楚如何开启应用调试模式

排查建议 #

1. 快速验证字体加载是否异常 #

在字体加载逻辑中添加错误捕获，避免因字体加载失败导致fontLoaded始终为false：

useEffect(() => {
  async function loadFont() {
    try {
      await Font.loadAsync({
        [...fonts...]
      });
      setFontLoaded(true);
    } catch (err) {
      console.error('字体加载失败:', err);
      // 强制进入主页面，验证是否是字体问题导致的卡壳
      setFontLoaded(true);
    }
  }
  loadFont();
}, []);

若测试APK能正常进入主页面，说明问题出在字体加载环节。

2. 用ADB抓取实时错误日志 #

• 确保电脑安装ADB工具，手机开启「开发者模式」并打开「USB调试」
• 连接手机到电脑，执行命令过滤错误日志：

adb logcat *:E

重点查找与应用包名、ReactNative、Expo相关的报错。如需完整日志，执行：

adb logcat

然后搜索应用名称或包名，定位启动时的异常信息。

3. 启用APK的远程调试 #

在应用入口添加调试开关，保留开发模式构建APK（不要加--no-dev参数）：

import { DevSettings } from 'react-native';

useEffect(() => {
  if (__DEV__) {
    DevSettings.setIsDebuggingRemotely(true);
  }
}, []);

安装APK后，打开电脑Chrome浏览器访问chrome://inspect，即可查看应用的控制台日志。

4. 排查导航组件初始化问题 #

临时替换导航组件，测试基础页面是否能正常显示：

if (!fontLoaded) {
  return <Text>Loading...</Text>
}

return (
  <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
    <Text>主页面测试</Text>
  </View>
);

若能正常显示，说明问题出在NavigationContainer或Drawer.Navigator的配置上，可逐步恢复导航组件排查。

5. 缩短构建耗时 #

• 使用Expo本地构建：执行eas build --local，无需上传云端，构建时间会大幅减少
• 在Expo Go中模拟生产环境：开启production模式测试，尽可能提前复现问题

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