如何有条件地在 React Native 组件中包含图像？

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>

我收到以下错误：Requiring unknown module "./CellIcons/MagnifyingGlassIcon.png".

提前致谢 =)

Answer 1

在包装过程中必须知道图像。在docs 中有一个关于它的部分。

把这个放在你定义 ExpandingCell 的文件的顶部：

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

那么你可以像这样使用常量

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

您必须满足所有您想在其中使用这种方式的图像的要求。