如何有條件地在React Native Component中包含圖像？

Question

我可以將靜態圖像添加到ListView單元中（請參閱下面的代碼），但是如何動態更改圖標圖像？

從React Native Docs

<Image source={require('./img/check.png')} /> 

是引用的圖像文件既iOS和Android的推薦方式。

我有一個名爲ExpandingCell的組件，它可以顯示一堆不同的圖標，但其他所有圖標都保持不變。

在ListView我創建cell對象，然後將其通入ExpandingCell呈現

ListView的數據源陣列看起來像這樣：

var LIST_DATA = [ 
... 
    {type: 'ExpandingCell', 
    icon: './CellIcons/MagnifyingGlassIcon.png', //unused 
    title: 'Lorem Ipsum', 
    detail: 'Donec id elit non mi porta gravida at eget metus.'}, 
... 
]; 

然後在renderCell方法它被傳遞上述細胞對象：

renderCell(cell) { 
    if (cell.type === 'ExpandingCell') { 
     return (
      <ExpandingCell cell={cell} /> 
     ); 
    } 
} 

現在在ExpandingCell我有這個render()：

render() { 
    return (
     ... 
     <Image source{ 
      require('./CellIcons/MagnifyingGlassIcon.png') 
     }> 
     </Image> 
     ... 
    ); 
} 

然而，當我試圖利用this.props.cell.icon這樣的：

<Image source={require(this.props.cell.icon)}></Image> 

我收到以下錯誤：​​

在此先感謝=）

Answer 1

的在包裝過程中必須瞭解圖像。在docs中有關於它的部分。

在文件的頂部將這個你定義ExpandingCell：

const MAGNIFYING_GLASS_ICON = require('./CellIcons/MagnifyingGlassIcon.png'); 

然後你就可以使用這樣

let icon = someCondition ? MAGNIFYING_GLASS_ICON : SOME_OTHER_ICON; 
<Image source={icon}/> 

你必須有不斷的需要爲你想要的所有圖片在那裏使用這種方式。