需要使用 react-native-fetch-blob 下载本地映像

Question

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

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

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') }) 的东西时，它正在工作。

Answer 1

require(imagePath)的存在是为了帮助打包者找到本地映像并将它们放置到应用程序包中。

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

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

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