React Native Componentに画像を条件付きで含めるにはどうすればよいですか？

Question

ListViewセルに静的な画像を追加できます（下記のコードを参照してください）。しかし、アイコン画像をどのように動的に変更できますか？ React Native Docs

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

から

は、iOSとAndroidの両方のための画像ファイルを参照するための推奨される方法です。

私はExpandingCellと呼ばれるコンポーネントを持っています。このコンポーネントには、さまざまなアイコンを表示するオプションがありますが、それ以外はすべて同じです。

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方法では、上記渡される：私はcellオブジェクトを作成し、

リストビュー・データ・ソース・アレイは次のようになりレンダリングするExpandingCellに渡しListViewで

セルオブジェクト：

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を定義するファイルの先頭にこれを入れて

：あなたはこの

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

のように定数を使用することができます

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

は、次にあなたがしたいすべての画像のために必要と持っている必要がありますそこでこの方法を使う。