嘗試從json文件加載位置時未顯示React Native圖像

Question

這是一個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文件，但未顯示圖像。 不明白為什么會這樣。

Answer 1

從require中刪除字符串。

改變這個

[
    {"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')},
]

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