在本地反應列表視圖中添加動態本地圖像

Question

我正試圖在一個簡單的應用程序中加載一些本地圖像，我正在使用本機圖像。

我在這裏跟隨指南 - https://facebook.github.io/react-native/docs/images.html

不幸的是，該指南指出以下幾點：

注意，爲了使這項工作，在需要的圖像名稱必須靜態已知。

這就是爲什麼我的代碼不工作時，我嘗試呈現在列表視圖行：

renderRow(chat){ 
    return (
     <View style={ styles.row }> 
     <Image 
      source={require(`../images/${chat.image}`)} //this is the part that's not working. It can't require a dynamic path 
      style={ styles.cellImage } 
      /> 
     </View> 
); 
} 

我怎樣才能做到這一點？或者你能否提出另一種可行的方法？

Answer 1

這是古怪而奇怪的，但是如果您有一組圖像選項（如果圖像居住在項目中是有意義的），那麼您可以根據給定的條件返回靜態需要的圖像。

getSource() { 
    if (condition) { 
     return require('../images/option-one'); 
    } else { 
     return require('../images/default-option'); 
    } 
} 

renderRow(chat){ 
    return (
     <View style={ styles.row }> 
      <Image 
       source={ this.getSource() } 
       style={ styles.cellImage } 
      /> 
     </View> 
    ); 
}