<img>即使在使用 react-native-vision-camera 拍摄新照片后也能查看旧照片

Question

我正在使用react-native-vision-camera捕捉图片并在<Image>组件中查看它。 预期的行为是在捕获新图片后更新图片。 由于<Image>组件的source属性指向一张新图片（同名好吧，但它仍然是一张新图片）。

但这永远不会发生。 即使我重新加载应用程序， <Image>仍然显示旧图片。 我必须重命名新图片。

我认为发生这种情况是因为在react-native-vision-camera保存新图片之前source属性的 state 可能会更新，因此<Image>组件呈现旧图片但据我所知我正在使用async-await ，这不应该发生。

我为捕获 function 编写的代码是

const [photoPath, setPhotoPath] = useState("");

const capture = async () => {
        const photo = await camera.current.takePhoto();
        const path = RNFS.ExternalDirectoryPath + '/photo-X.jpg';
        //when i update X (in the saved image name) with a new number,
        //<Image> views the correct image.

        await RNFS.moveFile(photo.path, path)
        setPhotoPath("file://" + path)
    }

查看图片的代码

{
    photoPath.length > 0 ?
        < Image
          source={{ uri: photoPath }}
          style={[styles.camera, { backgroundColor: 'black' }]}
        />
    :
        null
}

我有一个捕获<Button>调用capture() function 更新photoPath state 应该更新<Image>组件的source并且这个过程应该查看新图片。 但这即使在重新加载应用程序后也不会发生。 我必须为新图片选择一个新名称才能查看它。 为什么我得到这种行为而不是我期望的行为？ 我的代码或我的理解有什么问题，正确的解决方案是什么？

Answer 1

经过一天的搜索和调试，我发现<Image>出于我不知道的原因渲染了兑现的图像。 由于没有简单的方法可以删除 react-native 中的现金，因此这是解决我问题的变通方法。

< Image
    source={{ uri: photoPath + "?" + new Date() }}
    style={[styles.camera, { backgroundColor: 'black' }]}
/>