Expo升级SDK，iOS应用打包后白屏问题实录

项目版本

• Expo SDK版本：39 -> 47
• React Native版本：0.63.2 -> 0.70.8
• React版本：16.13.1 -> 18.1.0

记录

在将一个老项目从 Expo SDK 41 升级到 47 的过程中，我遇到了一个生产环境应用白屏的问题。
在 Expo Go开发环境里调试的时候，iOS 版本看起来正常，但使用 EAS build 打包后，却完全是空白的。

通过设备日志，我发现有一些报错信息，说找不到静态图片。

问题的根源在于我的 metro.config.js 文件。

当升级到新版本的SDK后，Expo 应该会生成一个类似下面这样的 metro.config.js 文件：

module.exports = {
    transformer: {
        assetPlugins: ['expo-asset/tools/hashAssetFiles']
    }
};
>

但在我们的项目中，我们之前已经创建了这个文件来支持 react-native-svg-transformer 请求的 svg 资源，因此 Expo 并不会覆盖它。

解决方案也很简单，就是将 Expo 生成的配置与我们现有的 metro.config.js 文件合并。在我把配置合并进去后，生产版本总算跟开发版本一样正常显示内容了。

这是我的最终 metro.config.js 配置：

const { getDefaultConfig } = require("@expo/metro-config")

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig(__dirname)

  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer"),
      assetPlugins: ['expo-asset/tools/hashAssetFiles']
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  }
})()

真的非常感谢这个StackOverflow上的回答
和
Expo 论坛里的这篇帖子，在找到解决方案时给了我很大的帮助。

---

以下是一些我在Debug时发现蛮有用的小贴士：

1. 为了加快调试过程，我在本地运行生产构建，以便更轻松地进行测试。具体步骤如下：

   • 运行 npx expo prebuild 以生成 ios 文件夹。
   • 打开 .xcworkspace 文件，并使用 Xcode IDE 构建应用程序。
   • 或者，您可以运行 expo start --ios --no-dev 来在本地构建应用程序。

   尽管实际构建时间与 EAS 构建类似，但这种方法大大减少了下载构建的时间以及上传到 TestFlight 时的处理时间。