<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' }]}
/>