Question

我正在处理通过API端点获取的图像，并将其显示在应用程序的主屏幕上。即使用户处于脱机状态，也应显示图像。问题是，有时根本没有显示图像，或者其中的某些图像丢失了，这仅在发行版本中发生，当我在模拟器上进行测试时，几乎每次都有0问题，但是当它在模拟器上发生时，通常表示找不到图片文件：/// XXX。

我尝试了很多软件包，包括： react-native-image-offline， react-native-img-cache， react-native-cached-image。我还尝试了react-native-fast-image，它只是可以正确显示图像（显示所有图像）的一种，但它不支持离线显示。最终，我尝试基于react-native-fs库创建自己的“缓存的图像”组件，该组件在模拟器上运行良好，但是在实际设备上，该应用程序无法显示单个图像。（下面的代码）

我也尝试阅读尽可能多的文章，但找不到适用于我的应用程序的文章。他们中的大多数只是依靠上面提到的某些程序包。

class CachedImage extends React.Component {

state = { source: null }

loadFile = ( path )=> {
  this.setState({ source:{uri: path}})
 }

downloadFile = (uri,path) => {
  RNFS.downloadFile({fromUrl:uri, toFile: path}).promise
  .then(res =>{
    this.loadFile(path)
  })
 }

componentDidMount(){
  const { uri, objId } = this.props;
  const extension = (Platform.OS === 'android') ? 'file://' : ''
  const path =`${extension}${RNFS.CachesDirectoryPath}/${objId}.png`
  RNFS.exists(path).then( exists => {
    if(exists){
      this.loadFile(path)
    } else {
      this.downloadFile(uri,path)
    }
  })
 }

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

如果您使用什么存储图像的建议，我将不胜感激。您是否遇到过同样的问题，原因是什么？谢谢。

有关在本机上使用脱机图像的提示

0 个答案: