1

我试图在我的图像组件中要求使用 react-native-fetch-blob 下载的图像，但是当我给它图像路径时，它一直说我«未知命名模块：'/Users/.../Library/...'< /p>

要求存储在本地目录中的图像的正确方法是什么？

let imagePath = null

RNFetchBlob
  .config({
     fileCache : true
  })
  .fetch('GET', uri)
  // the image is now dowloaded to device's storage
  .then((resp) => {
     // the image path you can use it directly with Image component
     imagePath = resp.path()
     this.setState({ uri: require(imagePath) })

     try {
       AsyncStorage.setItem(`${this.props.uri}`, imagePath);
     } catch (error) {
       console.log(error)
     }
  })

我的渲染方法：

render() {
    return(
      <Image style={this.props.style} source={this.state.uri} />
    )
}

问题不是因为我将变量设置为源，因为当我this.setState({ uri: require('../images/test.jpg') })在下载后放置类似 : 的内容时它正在工作。

4

1 回答 1

4

require(imagePath)存在以帮助打包程序查找本地图像并将它们放置到应用程序包中。

当您需要显示动态加载的图像时，您只需将file位置作为 URI 传递，例如：

render() {
  const imageAbsolutePath = this.state.imagePath;
  const imageUri = 'file://' + imageAbsolutePath;
  return <Image source={{uri: imageUri}}/>;
}

因此，在这种情况下，您不需要任何require陈述。

于 2017-01-20T13:24:41.653 回答