3

尽管我在 git 或 stackoverflow 上找到了所有信息，但我一直在屏幕上打我的头，但无法让它工作。

我想要达到的目标：

所选图像的持久性（来自库或相机）。当我重建我的应用程序时，也就是持久性，这意味着当我react-native run-ios为 iOS 或react-native run-androidAndroid 运行时。

我已经实施的

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

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它是怎么说的：

在 iOS 上，不要假设返回的绝对 uri 会持续存在。

我还发现这个线程也有类似的问题，但没有一个有效：

  • 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 更改。

我使用的版本：

  • “反应原生”：“0.57.8”，
  • "react-native-fs": "^2.13.2",
  • “反应原生图像选择器”：“^0.28.0”
4

2 回答 2

3

正如react-native-image-picker各州

在 iOS 上，不要假设返回的绝对 uri 会持续存在。

这意味着，如果您将绝对 uri 存储到文件中，然后react-native run-ios应用程序 GUID 将更改，那么绝对 uri 将不再存在或工作。但是，这一点很重要，图像将在您保存它的文件夹中，因为它会被复制。

解决此问题的唯一解决方案是保存文件的目录和文件名，并在您想使用它时重建 uri。

所以这意味着你会保存在状态

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

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

let pathToFile = `${RNFS.DocumentDirectoryPath}${this.state.image}`
于 2019-01-17T09:55:51.453 回答
1

您可以通过用波浪号“~”替换“/Documents/...”之前的路径来简单地解决这个问题（不依赖于 react-native-fs）。

let pathToFile = "file:///var/mobile/Containers/Data/Application/9793A9C3-C666-4A0E-B630-C94F02E32BE4/Documents/images/72706B9A-12DF-4196-A3BE-6F17C61CAD06.jpg"
if (Platform.OS === 'ios') {
    pathToFile = '~' + pathToFile.substring(pathToFile.indexOf('/Documents'));
}

React Native 支持这一点，您可以在其源代码中看到。

于 2020-08-01T08:43:32.753 回答