javascript - 在 react native ListView 中添加动态本地镜像

Question

我正在尝试在一个使用 native react 制作的简单应用程序中加载一些本地镜像。

我正在遵循此处的指南 - https://facebook.github.io/react-native/docs/images.html

不幸的是，该指南说了以下内容:

Note that in order for this to work, the image name in require has to be known statically.

这就是为什么当我尝试在 ListView 中渲染行时我的代码无法工作的原因:

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>
    );
}