React Native食谱APP网络图片转本地资源报错求助

问题原因 #

你遇到的JSON value 10 of type NSNumber cannot be converted to a valid URL错误，是因为require('./chicken.jpg')返回的是React Native本地资源的数字ID，而你在Image组件里用{ uri: item.photo_url }把这个数字当成了URL字符串处理，导致类型不匹配。

修复方案 #

方法一：直接使用require返回的资源值

1. 保持DataArray.js的代码不变：

export const categories = [
  {
    id: 1,
    name: 'Chicken',
    photo_url: require('./chicken.jpg'),
  },
  // 其他分类...
];

2. 修改CategoryScreen中Image组件的source属性，去掉uri包裹，直接使用item.photo_url：

<Image style={styles.categoriesPhoto} source={item.photo_url} />

方法二：存储路径字符串，渲染时动态require（仅适用于静态路径）

如果想在数组里只存路径字符串，需要确保路径是静态可解析的：

1. 修改DataArray.js：

export const categories = [
  {
    id: 1,
    name: 'Chicken',
    photo_url: './chicken.jpg',
  },
  // 其他分类...
];

2. 渲染时直接在source中使用require：

<Image style={styles.categoriesPhoto} source={require(`${item.photo_url}`)} />

注意：这种方式要求路径是静态字符串，不能用完全动态的变量（比如从接口获取的路径），React Native打包时需要提前解析所有本地资源。

额外注意事项 #

• 确认图片文件路径正确：chicken.jpg必须和DataArray.js在同一目录，否则要调整相对路径（比如../assets/chicken.jpg）。
• iOS系统区分文件大小写，确保文件名和代码中的一致（比如Chicken.jpg和chicken.jpg是不同的）。
• 图片格式需被React Native支持（常见的jpg、png都可以）。

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