react-native - 更新应用程序后，RN 获取 blob 下载的图像/文件不显示

Question

我正在使用 rn-fetch-blob 包下载缓存中的图像。我已经展示了图像。如果我将应用程序更新到新版本，则下载的图像不会在 IOS 中显示。有什么解决办法吗？收到此错误（https://github.com/joltup/rn-fetch-blob/issues/204）

提前致谢。

Answer 1

问题已修复，我的代码是，

导入反应，{ useState，useEffect } from 'react';

从 'react-native-fs' 导入 * 作为 RNFS；

// 导入所需组件 import { StyleSheet, Text, View, TouchableOpacity, PermissionsAndroid, Image, Platform, } from 'react-native';

从“@react-native-async-storage/async-storage”导入 AsyncStorage；

常量设置 = () => { 常量 [LocalImage, setLocalImage] = useState('')

const image_URL =
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZ6QSUYDRBRChIXGs0jqH55cZytOPPjjh4Bg&usqp=CAU'

const renderImagePath = async () => {
    let initialImage = await AsyncStorage.getItem('localImage')
    if (initialImage == null) {
        const extension = (Platform.OS === 'android') ? 'file://' : ''
        const path = `${extension}${RNFS.DocumentDirectoryPath}/localImg.png`; //U can use any format png, jpeg, jpg

        RNFS.exists(path).then(exists => {
            RNFS.downloadFile({ fromUrl: image_URL, toFile: path }).promise.then(res => {
                setLocalImage(`${RNFS.DocumentDirectoryPath}/localImg.png`)
                AsyncStorage.setItem('localImage', 'localImg.png')
            })
        }).catch(error => {
            console.warn(error);
        });
    }
    else {
        console.log('file exists', initialImage)
        setLocalImage(`${RNFS.DocumentDirectoryPath}/${initialImage}`)
    }
}

console.log('LocalImage', LocalImage)

return (
    <View style={styles.container}>
        <View style={{ alignItems: 'center' }}>
            <Text style={{ fontSize: 30, textAlign: 'center' }}>
                React Native Image Download Example
    </Text>
            <Text
                style={{
                    fontSize: 25,
                    marginTop: 20,
                    marginBottom: 30,
                    textAlign: 'center',
                }}>
                www.aboutreact.com
    </Text>
        </View>
        {LocalImage ?
            <Image
                source={{
                    uri: `file://${LocalImage}`
                }}
                style={{
                    width: '100%',
                    height: 100,
                    resizeMode: 'contain',
                    margin: 5
                }}
            />
            : null}
        <TouchableOpacity
            style={styles.button}
            onPress={renderImagePath}>
            <Text style={styles.text}>
                Download Image
    </Text>
        </TouchableOpacity>
    </View>
);

};

导出默认设置；

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, button: { width: '80%', padding: 10, backgroundColor: 'orange', margin: 10, }, text: { color: '#fff', fontSize: 20, textAlign: 'center', padding: 5, }, });