如何有条件地在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}/> 

你必须有不断的需要为你想要的所有图片在那里使用这种方式。