<Image> 即使在使用反应原生视觉相机拍摄新图片后也能查看旧图片

Question

我使用react-native-vision-camera捕获图片并在<Image>组件中查看它。预期的行为是在捕获新图片后更新图片。由于<Image>分量的source属性指向新的图片(名称相同，但仍然是新的图片)。

但这从来没有发生过。甚至当我重新加载应用程序时，<Image>仍然显示旧图片。我必须重命名新图片。

我认为这种情况的发生是因为source属性的状态在react-native-vision-camera保存新图片之前更新了，所以<Image>组件渲染了旧图片，但我使用的是async-await，所以据我所知，这不应该发生。

我为捕获函数写的代码是

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()函数，该函数更新photoPath状态，该状态应该更新<Image>组件的source，该过程应该查看新图片。但即使在重新加载应用程序后也不会发生这种情况。我必须为新图片选择一个新名称才能查看它。为什么我得到的是这样的行为，而不是我期待的行为?我的代码或我的理解出了什么问题，正确的解决方案是什么?

Answer 1

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

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