Question

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

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

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，并在source属性中显示图像。我使用uri，因为图像路径是动态创建的。

render（） 在我的组件中

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>
    )
}

让我知道您是否对我有任何疑问。

显示图像来自react-native-fetch-blob？

0 个答案: