使用react-native-remote-svg，Expo应用发布后SVG图片消失求助

这种情况我碰到过好几次，核心原因是react-native-remote-svg在Expo生产构建流程中，对本地SVG资源的处理和开发环境不一致——开发时Metro会实时解析本地资源，但发布时Expo的静态打包机制需要明确配置或适配官方支持的库。

下面给你两个可行的解决方案，按推荐优先级排序：

方案一：改用Expo官方支持的react-native-svg（最稳妥） #

react-native-svg是Expo官方维护的SVG处理库，完全适配Expo的开发和生产构建流程，不会出现发布后资源丢失的问题。

1. 安装依赖：

   npx expo install react-native-svg
   

2. 调整代码：
   对于本地SVG，推荐两种用法：

   • 用法1：直接加载本地SVG文件
     使用SvgUri组件加载本地资源，注意需要获取require返回的资源URI：

     import { SvgUri } from 'react-native-svg';
     
     <SvgUri style={styling.imageStyle} uri={require('../res/images/sampleImage.svg').default} />
     

   • 用法2：将SVG转换为React组件（性能更好）
     用@svgr/cli把SVG转成React Native组件，这样可以直接像组件一样使用，还能自定义颜色等属性：

     # 用npx直接运行转换命令
     npx @svgr/cli --native ../res/images/sampleImage.svg -o ../res/images/SampleImage.js
     

     然后在代码中导入使用：

     import SampleImage from '../res/images/SampleImage';
     
     <SampleImage style={styling.imageStyle} />
     

方案二：修复react-native-remote-svg的生产构建问题（如果坚持用这个库） #

如果你不想换库，可以尝试以下步骤确保Expo打包时包含SVG资源：

1. 在app.json的expo字段中添加资源打包规则，明确告诉Expo要包含所有SVG文件：

   {
     "expo": {
       // 其他配置...
       "assetBundlePatterns": [
         "**/*.svg",
         "**/*.png",
         "**/*.jpg" // 保留你已有的其他资源类型
       ]
     }
   }
   

2. 检查react-native-remote-svg的版本是否和当前Expo SDK兼容，建议安装适配你SDK版本的最新版：

   npm install react-native-remote-svg@latest
   

3. 重新发布应用：

   npx expo publish
   

为什么本地正常但发布后消失？ #

开发环境下，Metro bundler会动态解析本地资源路径，react-native-remote-svg能正常读取到SVG文件；但Expo生产构建时会把资源打包成静态bundle，如果资源没有被明确纳入打包列表，或者库没有适配Expo的资源解析逻辑，就会出现资源找不到的情况。

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