项目版本
- 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"]
}
}
})()
真的非常感谢这个SO上的回答 和 Expo 论坛里的这篇帖子，在找到解决方案时给了我很大的帮助。
以下是一些我在Debug时发现蛮有用的小贴士：
- 为了加快调试过程，我在本地运行生产构建，以便更轻松地进行测试。具体步骤如下：
- 运行
npx expo prebuild以生成ios文件夹。 - 打开
.xcworkspace文件，并使用 Xcode IDE 构建应用程序。 - 或者，您可以运行
expo start --ios --no-dev来在本地构建应用程序。
- 运行
