android - 动态设置 React Native <Image/> 的 uri

Question

我正在尝试构建一个左侧有一个图标的 FlatList(与任何联系人应用程序非常相似)，并且我正在尝试根据元素名称动态加载图像

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

这是 React Native 不允许的，如他们的 Image 所述文档。 有什么解决方法吗？

Answer 1

如果你的图像在你的项目中(例如 Assets 文件夹)你不能动态创建，你最多只能选择一个数组，如下所示:

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

但您可以将图像保存在文件夹中，并使用“file://”或“data://”从本地存储中读取，就像您从 Web 读取一样，可以是动态链接:

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

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

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