尝试从 json 文件加载位置时 React Native 图像未显示答案

【问题标题】：React Native image not showing when try to load location from json file尝试从 json 文件加载位置时 React Native 图像未显示
【发布时间】：2018-01-16 12:34:22
【问题描述】：

这是一个 json 文件，用于存储每个元素的标题和图像位置。

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

现在我想使用平面列表显示所有图像和标题。标题显示完美，但图片不显示。

<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>
     )
   }
/>

我检查了图像位置是否完全来自 json 文件，但没有显示图像。不明白为什么会这样。

【问题讨论】：

您的img 文件夹是否与您的组件相同？ facebook.github.io/react-native/docs/images.html

标签： json image react-native react-native-flatlist

【解决方案1】：

从要求中删除字符串。

改一下

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

到这里

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

【讨论】：

【解决方案2】：

您的图片来源是字符串。你应该评估它。

<FlatList horizontal= {true}
  data={newsCategory}
    renderItem={({item}) => (
      <TouchableOpacity
        style={styles.option}
      >
      <Image
        style={styles.imgButton}
        source={eval(item.image)}
      />
      <Text style={styles.buttonText}>{item.title}</Text>
    </TouchableOpacity>
     )
   }
/>

【讨论】：