Question

我正在尝试构建一个FlatList，左边会有一个图标（就像任何Contacts应用程序一样），我试图根据元素的名称动态加载图像

<Image
    style={styles.image}
    source={{uri: `./assets/${this.props.name}.png`}}
/>

正如他们的Image文档所述，React Native不允许这样做。有没有解决方法？

Answer 1

如果您的图像在您的项目中（例如资产文件夹），您无法动态创建，您可以做的最多就是要选择的数组，如下所示：

var icons = [ require('image!my-icon-active') ,require('image!my-icon-inactive')];
<Image
    style={styles.image}
    source={icons[1]}
/>

但您可以将图像保存在文件夹中，并使用“file：//”或“data：//”从本地存储中读取，就像您正在从Web上阅读一样，可以通过dinamically链接：

let uri = 'file://'+this.state.pathToResources+'/'+href;
<Image
          style={{width: 400, height: 400}}
          resizeMode='contain'
          source={{uri}}
        />

您可以使用lib https://github.com/itinance/react-native-fs 为您准备好智能手机的本地磁盘，但您需要管理高度e宽度。

更多阅读https://facebook.github.io/react-native/docs/images.html#uri-data-images

Answer 2

只需在状态中创建一个变量：

constructor(props) {
    super(props);

    this.state = {
      imgUri: ""
    }
}

...

<Image
  style={styles.image}
  source={{uri: this.state.uri}}/>

通过调用this.setState({imgUri: "foobar"})

更新uri

动态设置原始<img/>的原子的uri

2 个答案: