React Native从JSON加载图片在FlatList内无法显示的问题求助

我之前也踩过这个一模一样的坑！核心原因是你在JSON文件里写的require('./img/xxx.jpg')其实只是个普通字符串，并没有被JS引擎执行——React Native的Image组件需要的是实际的图片资源引用（require()执行后的返回值，或者网络图片的uri对象），直接传字符串肯定加载不出来。

为什么会这样？ #

JSON是静态数据格式，它不会被当作JS代码解析执行。所以你的item.image拿到的是字符串"require('./img/bangladesh.jpg')"，而不是require('./img/bangladesh.jpg')执行后得到的图片资源ID（一个数字）。Image组件根本无法把这个字符串转换成可显示的图片。

两种可行的解决方案 #

方案1：修改JSON为纯路径，渲染时动态require #

先把你的JSON文件里的image字段改成纯路径字符串：

[
 {"key": "a", "title": "Bangladesh", "image": "./img/bangladesh.jpg"},
 {"key": "b", "title": "Sports", "image": "./img/sports.jpg"},
 {"key": "c", "title": "Politics", "image": "./img/politics.jpg"},
 {"key": "d", "title": "Entertainment", "image": "./img/entertainment.png"},
 {"key": "e", "title": "Economics", "image": "./img/economics.jpg"},
 {"key": "f", "title": "Technology", "image": "./img/technology.jpg"},
 {"key": "g", "title": "Others", "image": "./img/m.jpg"}
]

然后在FlatList的renderItem里直接执行require：

<FlatList 
  horizontal={true} 
  data={newsCategory} 
  renderItem={({item}) => (
    <TouchableOpacity style={styles.option} >
      {/* 这里直接用require(item.image)，注意路径必须是静态可识别的 */}
      <Image style={styles.imgButton} source={require(item.image)} />
      <Text style={styles.buttonText}>{item.title}</Text>
    </TouchableOpacity>
  )} 
/>

⚠️ 注意：React Native的require不支持完全动态的路径拼接（比如require('./img/' + item.image)），所以你的JSON里的路径必须是完整的、固定前缀的静态路径，这样打包工具才能提前识别并打包这些图片。

方案2：在JS中预先导入图片，再构建数据数组 #

如果担心动态require的限制，或者想更稳妥，直接在JS文件里先导入所有图片，再构建数据数组：

// 先导入所有需要的图片资源
import bangladeshImg from './img/bangladesh.jpg';
import sportsImg from './img/sports.jpg';
import politicsImg from './img/politics.jpg';
import entertainmentImg from './img/entertainment.png';
import economicsImg from './img/economics.jpg';
import technologyImg from './img/technology.jpg';
import othersImg from './img/m.jpg';

// 构建数据数组，image字段直接用导入的资源
const newsCategory = [
 {"key": "a", "title": "Bangladesh", "image": bangladeshImg},
 {"key": "b", "title": "Sports", "image": sportsImg},
 {"key": "c", "title": "Politics", "image": politicsImg},
 {"key": "d", "title": "Entertainment", "image": entertainmentImg},
 {"key": "e", "title": "Economics", "image": economicsImg},
 {"key": "f", "title": "Technology", "image": technologyImg},
 {"key": "g", "title": "Others", "image": othersImg}
];

// 然后正常使用FlatList
<FlatList 
  horizontal={true} 
  data={newsCategory} 
  renderItem={({item}) => (
    <TouchableOpacity style={styles.option} >
      <Image style={styles.imgButton} source={item.image} />
      <Text style={styles.buttonText}>{item.title}</Text>
    </TouchableOpacity>
  )} 
/>

这种方法完全避免了动态路径的问题，打包工具能准确识别所有需要打包的图片，也是我个人更推荐的方式。

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