2

我的目标是能够使用 react-native-fetch-blob 缓存图像。我的问题是尝试读取 React Native Image 组件中的 react-native-fetch-blob 路径的来源。屏幕上没有显示任何内容，我查看了几个堆栈溢出和 github 问题和问题，但找不到解决方案。这是针对安卓的。

我相信我能够正确地将图像存储在文件目录中。我正在运行下面的 storeImages() 代码，它有一个 RNFetchBlob.fs.exists() 方法，在检查文件路径时返回 true。下面的代码在另一个 API 调用中的我的 redux 文件中运行。它根据它的 schedule_id 值从 redux 对象中获取信息来存储图像。

Redux 中的storeImages()

function storeImages(obj){
    let picDir = RNFetchBlob.fs.dirs.PictureDir;
    //Run first for the Card Image
    RNFetchBlob.config({
        fileCache : true,
        //is appendExt necessary? I tried both and nothing displayed
        // appendExt : 'jpg',
        path: ${picDir}/${obj.schedule_id}BG
        })
        .fetch('GET', `${obj.cardImage}`, {
        })
        .then((res) => {
            let status = res.info().status;
            RNFetchBlob.fs.exists(res.path())
            .then((res) => {
                console.log(res);
            })
            if(status == 200) {
            // the temp file path
            console.log('The file saved to ', res.path())
        }
        })
    .catch((errorMessage, statusCode) => {
        console.log(errorMessage);
    })

我也在我的组件中导入 React Native Fetch Blob，然后使用相同的图像路径，并且字符串中的计划 ID 来自容器组件。由于它是保存图像的 API 调用，因此我使用 RNFetchBlob.fs.exists() 来查看文件是否已存储。这将返回 true 并在源属性中显示图像。我使用uri，因为图像路径是动态创建的。

我的组件中的渲染（）

render() {
    let picDir = RNFetchBlob.fs.dirs.PictureDir;
    let imgPath= `${picDir}/${this.props.assetData[0].schedule_id}BG`;

    return(
        // Max height and width of screen
        <View style={{ position: 'absolute', top: 0, left: 0, height, width, zIndex: 1 }}>
            {
            RNFetchBlob.fs.exists(${picDir}/{${this.props.assetData[0].schedule_id}BG) 
            ?
                <Image source={{ uri: imgPath}} resizeMode='cover' style={{flex: 1}} />
            :
                null
            }
        </View>
    )
}

如果您对我有任何问题，请告诉我。

4

0 回答 0