Question

我试图在一个简单的应用程序中加载一些本地图像，我正在使用本机做出反应。

我按照此处的指南进行操作 - https://facebook.github.io/react-native/docs/images.html

不幸的是，该指南说明如下：

请注意，要使其正常工作，必须静态了解require中的图像名称。

当我尝试在列表视图中呈现行时，我的代码不起作用的原因是：

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

在反应本机列表视图中添加动态本地映像

1 个答案: