React Native Expo应用中无法定位图片文件的问题排查求助

开发者阿泽

2026-7-16

处理React Native Expo本地图片路径找不到的警告

排查步骤

检查app.json的资源配置：确认expo.assets数组中包含./assets/路径，Expo只会打包这里声明的资源。示例配置：
```
{
  "expo": {
    "assets": ["./assets/"]
  }
}
```
核对文件名大小写：代码中引用的文件名（如story2.jpg）必须和实际文件完全一致，MacOS本地不区分大小写，但模拟器环境会严格区分。
验证打包后的资源存在：手动访问警告提示的模拟器路径，确认图片文件是否真的被复制到该目录，若缺失则需要重新构建。

解决建议

修正本地图片引用方式
Expo中本地资源不能用uri+相对路径的方式引用，需改用require。由于require不支持完全动态路径拼接，可通过映射表实现：

// 提前定义图片映射
const storyImageMap = {
  'story1.jpg': require('./assets/story1.jpg'),
  'story2.jpg': require('./assets/story2.jpg'),
  'story3.jpg': require('./assets/story3.jpg'),
  'story4.jpg': require('./assets/story4.jpg'),
};

const StoriesView = ({ stories }) => {
  return (
    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.storiesScrollView}>
      <View style={styles.storiesContainer}>
        {stories.map((name, index) => (
          <Image
            key={index}
            style={styles.storyImage}
            source={storyImageMap[name]}
          />
        ))}
      </View>
    </ScrollView>
  );
};