response-native-image-picker - постоянное хранилище после восстановления

Я бьюсь головой об экран в течение некоторого времени и просто не могу заставить его работать, несмотря на всю информацию, которую я нашел на 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.

Android

«Ответ сборщика»:

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

Итак, как я могу справиться с этим изменением UUID приложения после перестройки, поскольку пути в iOS являются динамическими.

Версии, которые я использую:

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

person Jojo    schedule 16.01.2019    source источник
comment
Что вы имеете в виду под перестройкой? Вы имеете ввиду перезагрузку CMD+R? Или вы имеете в виду удаление приложения из симулятора, его восстановление и переустановку? Вы пробовали зайти в каталог документов на симуляторе и посмотреть, есть ли там изображение? Вы пробовали использовать RNFS.readDir, чтобы проверить наличие изображений?   -  person Andrew    schedule 16.01.2019
comment
Я имею в виду под выполнением восстановления: react-native run-ios. Перезарядки (CMD+R) работают. Desinstall, конечно, теряет настойчивость. Но мне нужно сохранять настойчивость при перестройке (например, когда вы получаете новую версию сборки)   -  person Jojo    schedule 16.01.2019
comment
хорошо, для RNFS.readDir в моем myCustomPath я получаю изображение из моего предыдущего примера с путем: /Users/johanmontmartin/Library/Developer/CoreSimulator/Devices/33076AD2-C989-47E9-A803-3E56CC4B09D6/data/Containers/Data/Application/A4CE9AE7-D766-4949-B380-9642138D7C58/Documents/myCustomPath/6A5C27E3-89F7-465F-A855-66749C92D086.jpg, но, как мы видим, Application GUID в пути не тот, потому что он регенерируется с новыми сборками.   -  person Jojo    schedule 16.01.2019
comment
Итак, файл существует, но у него другой URL-адрес?   -  person Andrew    schedule 16.01.2019
comment
Верный. Это проблема, с которой многие люди обычно сталкиваются после перестройки, потому что каждый раз при перестройке внутренний идентификатор приложения изменяется (см. [stackoverflow.com/questions/39286211/ (этот поток stackoverflow), но этого не произошло Помоги мне)   -  person Jojo    schedule 17.01.2019
comment
та же проблема, что и в [github.com/react -native-community / react-native-image-picker /   -  person Jojo    schedule 17.01.2019
comment
Почему решение stackoverflow.com/questions/39286211/ работает для вас? Возможно, вам придется поделиться дополнительным кодом или более подробно объяснить, что происходит в вашем коде после выбора изображения.   -  person Andrew    schedule 17.01.2019
comment
решение не работает, потому что RNFS.DocumentDirectoryPath после перестройки возвращает новый UUID приложения, поэтому путь к исходному изображению был потерян. Для решения tilda (~) это не сработало, так как изображение даже не отображалось.   -  person Jojo    schedule 17.01.2019
comment
хорошо ... Я думаю, что у меня проблема, я не регенерировал путь, когда хотел отобразить изображение ... попробую обновить   -  person Jojo    schedule 17.01.2019


Ответы (2)


Как указано в 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}`
person Andrew    schedule 17.01.2019
comment
Правильно, это то, что я понял и только что проверил. Моя проблема в том, что я не реконструировал путь при отображении изображения: сработало source={{uri : RNFS.DocumentDirectoryPath+"/"+info.item.image.fileName}} - person Jojo; 17.01.2019

Вы можете просто решить эту проблему (не полагаясь на response-native-fs), заменив путь до / Documents / ... тильдой ~.

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, как вы можете видеть в их исходном коде.

person lucas toong    schedule 01.08.2020