ios - react-native-image-picker - 重建后的持久存储

Question

尽管我在 git 或 stackoverflow 上找到了所有信息，但我已经在屏幕上撞了一段时间，但就是无法让它工作。

我想要实现的目标:

所选图像的持久性(来自库或相机)。当我重建我的应用程序时也会持久化，这意味着当我运行 react-native run-ios 时对于 iOS，或 react-native run-android适用于 Android。

我实现了什么

这是我添加图像时调用的函数。

ImagePicker.showImagePicker({
   storageOptions: {
      path: 'myCustomPath',
      waitUntilSaved: true,
      cameraRoll: true,
      skipBackup : true
   },
   noData: true
}, res => {
   if (res.didCancel) {
      console.log("User cancelled");
   } else if (res.error) {
      console.log("Error", res.error);
   } else {
      console.log("Picker Response:", res);
      // Getting the fileName as for iOS the fileName is incorrect even with waitUntilSaved to true.
      const path = res.uri.split("/");
      const fileName = path[path.length-1]; 
      let uri = "file://" + Platform.select({
         android: RNFS.ExternalStorageDirectoryPath + "/Pictures/",
         ios: RNFS.DocumentDirectoryPath+"/"
         })
         + "myCustomPath/" + fileName

      this.setState({
         pickedImage: {
            uri: uri,
         }
      });
      this.props.onImagePicked({ uri: res.uri }); 
   }
});

在我的主页中，我显示了 <Thumbnail square style={{width:50, height:50}} source={info.item.image} /> 中的图像

----- 编辑开始----- ---- 解决方案 ----

解决方案是使用文件名重建我想要显示图像的路径: <Thumbnail square style={{width:50, height:50}} source={{uri : RNFS.DocumentDirectoryPath+"/"+info.item.image.fileName}} />

----- 编辑结束 -----

结果

结果如下，您会看到在 Android 上运行良好，但在 iOS 上运行不佳。 我使用 react-native-image-picker 在库中选择了一张图片.

安卓

“选择器响应”:

fileName: "image-d53839d1-fa89-4a61-b648-f74dace53f83.jpg"
fileSize: 235728
height: 1440
isVertical: true
originalRotation: 0
path: "/storage/emulated/0/Pictures/myCustomPath/image-d53839d1-fa89-4a61-b648-f74dace53f83.jpg"
type: "image/jpeg"
uri: "file:///storage/emulated/0/Pictures/myCustomPath/image-d53839d1-fa89-4a61-b648-f74dace53f83.jpg"
width: 1080

我的图像的保存“uri”是:file:///storage/emulated/0/Pictures/myCustomPath/image-d53839d1-fa89-4a61-b648-f74dace53f83.jpg

行为如下:

• 左边的截图是保存图片后的，
• 右边的屏幕截图是重建后的，打开应用程序，我仍然可以看到我的图像!

--> 快乐!

现在在 iOS 上

“选择器响应”:

fileName: "IMG_0004.JPG"
fileSize: 470300
height: 1618
isVertical: true
latitude: 64.752895
longitude: -14.538611666666666
origURL: "assets-library://asset/asset.JPG?id=99D53A1F-FEEF-40E1-8BB3-7DD55A43C8B7&ext=JPG"
timestamp: "2012-08-08T21:29:49Z"
type: "image/jpeg"
uri: "file:///Users/[name]/Library/Developer/CoreSimulator/Devices/33076AD2-C989-47E9-A803-3E56CC4B09D6/data/Containers/Data/Application/4756F0A2-9CCC-4F9A-9315-D55434328FD9/Documents/myCustomPath/6A5C27E3-89F7-465F-A855-66749C92D086.jpg"
width: 1080

我的图像的保存“uri”是:file:///Users/[name]/Library/Developer/CoreSimulator/Devices/33076AD2-C989-47E9-A803-3E56CC4B09D6/data/Containers/Data/Application/4756F0A2-9CCC-4F9A-9315-D55434328FD9/Documents/myCustomPath/6A5C27E3-89F7-465F-A855-66749C92D086.jpg

行为如下:

• 左边的截图是保存图片后的，
• 右边的屏幕截图是重建后的，打开应用程序，我仍然可以看到我的图像!

--> 不开心!

我的问题

我已经阅读了所有关于返回的 uri 的临时方面的内容，看看是什么 react-native-image-picker说:

On iOS, don't assume that the absolute uri returned will persist.

我也找到了这个 thread有类似的问题，但没有奏效:

• RNFS.DocumentDirectoryPath重建后路径中有不同的 UUID，因此找不到文件，因为它是用以前的 UUID 保存的
• 我尝试为 iOS 将 uri 保存为 '~/Documents/myCustomPath/myfilename.jpg' 具有相同的行为。添加时显示，重建后空白。

重建前我有:

文档目录路径为: file:///Users/[user]/Library/Developer/CoreSimulator/Devices/33076AD2-C989-47E9-A803-3E56CC4B09D6/data/Containers/Data/Application/466CAF1A-AF8D-423C-9BF6-F0A242AF8038/Documents/

和我保存的图片 uri :

file:///Users/[user]/Library/Developer/CoreSimulator/Devices/33076AD2-C989-47E9-A803-3E56CC4B09D6/data/Containers/Data/Application/466CAF1A-AF8D-423C-9BF6-F0A242AF8038/Documents/myCustomPath/20969988-633B-46BD-8558-E39C3ADD6D12.jpg

但在重建后，应用程序 UUID 更改为 BEE128C8-5FCF-483C-A829-8F7A0BB4E966现在将我的文档目录设为

file:///Users/[user]/Library/Developer/CoreSimulator/Devices/33076AD2-C989-47E9-A803-3E56CC4B09D6/data/Containers/Bundle/Application/BEE128C8-5FCF-483C-A829-8F7A0BB4E966/Documents

但仍然在 uri 中查看图片:

file:///Users/[user]/Library/Developer/CoreSimulator/Devices/33076AD2-C989-47E9-A803-3E56CC4B09D6/data/Containers/Data/Application/466CAF1A-AF8D-423C-9BF6-F0A242AF8038/Documents/myCustomPath/20969988-633B-46BD-8558-E39C3ADD6D12.jpg

当图片现在实际位于:

file:///Users/[user]/Library/Developer/CoreSimulator/Devices/33076AD2-C989-47E9-A803-3E56CC4B09D6/data/Containers/Data/Application/BEE128C8-5FCF-483C-A829-8F7A0BB4E966/Documents/myCustomPath/20969988-633B-46BD-8558-E39C3ADD6D12.jpg

那么，由于 iOS 上的路径是动态的，我该如何应对重建后 App UUID 的变化。

我使用的版本:

• "react-native": "0.57.8",
• "react-native-fs": "^2.13.2",
• "react-native-image-picker": "^0.28.0"

Answer 1

如 react-native-image-picker 所述

On iOS, don't assume that the absolute uri returned will persist.

这意味着如果您将绝对 uri 存储到文件然后执行 react-native run-ios 应用程序 GUID 将更改并且绝对 uri 将不再存在或工作。然而，这重要图像将位于您保存它的文件夹中，因为它会被复制。

解决此问题的唯一解决方案是保存目录和文件的文件名，并在需要时重建 uri。

所以这意味着你将保存状态

this.setState({ image: '/myCustomPath/image.jpg' });

然后当你开始使用它时你会像这样重建路径

let pathToFile = `${RNFS.DocumentDirectoryPath}${this.state.image}`