使用EAS构建的Expo应用上传至TestFlight后出现白屏问题

第一步：获取崩溃/错误日志 #

白屏几乎都是代码抛出未捕获错误导致应用无法渲染，先拿到具体错误信息才能定位：

• 用Xcode连接测试设备，打开控制台，过滤应用名称，启动应用查看实时报错
• 在TestFlight设备上，进入设置 > 隐私与安全性 > 分析与改进 > 分析数据，找到应用崩溃日志（文件名格式通常为[应用名]-[日期].ips）

第二步：清理依赖冲突与冗余 #

从你的package.json中发现几个潜在问题：

• 同时安装了expo-linear-gradient（Expo官方集成）和react-native-linear-gradient（第三方库），功能重复会导致生产打包冲突，删除react-native-linear-gradient
• @aws-amplify/cli是开发工具，无需放在dependencies，移到devDependencies或直接卸载（本地开发装全局即可）

执行命令清理依赖：

npm uninstall react-native-linear-gradient @aws-amplify/cli
npm install

第三步：修正app.json配置 #

• slug字段不能为空，填写与应用名对应的小写字符串（如my-app），EAS打包依赖此字段标识项目
• updates.fallbackToCacheTimeout设为0会导致应用无缓存时直接白屏，建议修改为3000（3秒）：

  "updates": {
    "fallbackToCacheTimeout": 3000
  }
  

• 确保ios.buildNumber与TestFlight已发布版本不重复，每次打包需递增

第四步：测试本地EAS构建 #

用EAS构建本地包，在模拟器运行复现问题，方便调试：

eas build --platform ios --local

构建完成后，将生成的.ipa文件拖入Xcode模拟器安装，启动查看是否白屏，同时通过Xcode控制台获取报错信息。

第五步：添加全局错误捕获 #

在应用入口（如App.js）添加错误边界，捕获未处理错误并直观展示：

import React from 'react';
import { View, Text } from 'react-native';

class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error('全局错误:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>应用出错：{this.state.error?.message}</Text>
        </View>
      );
    }
    return this.props.children;
  }
}

// 用ErrorBoundary包裹整个应用
export default function App() {
  return (
    <ErrorBoundary>
      {/* 原有应用代码 */}
    </ErrorBoundary>
  );
}

第六步：检查生产环境配置 #

• 确认AWS Amplify配置已正确注入生产包，若使用环境变量，需在eas.json或Expo Dashboard中配置生产环境变量
• 检查代码中依赖__DEV__的逻辑，生产环境__DEV__为false，确保没有未处理的分支逻辑

第七步：再次验证无dev模式运行 #

重新执行无dev模式的本地运行，排查隐藏错误：

expo start --no-dev --minify --ios

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