Я уже некоторое время бьюсь головой об экран и просто не могу заставить его работать, несмотря на всю информацию, которую я нашел в 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.
Версии, которые я использую:
- «реагировать-нативный»: «0,57,8»,
- "response-native-fs": "^ 2.13.2",
- «Reaction-native-image-picker»: «^ 0.28.0»