React Native iOS читает изображение из папки документов Documents

Я должен загрузить изображения в локальную файловую систему приложений iOS и прочитать их обратно.

На моем симуляторе я вижу файловую систему моего приложения с каталогами

/Library/Developer/CoreSimulator/Devices/[UUID]/data/Containers/Data/Application/[UUID]/

/Documents
/Library
/tmp

Чтобы попробовать, я скопировал foo.png в папку /Documents и затем попытался

<Image source={{uri: "file://Documents/foo.png"}} style={{width:100, height:100}}/>

Это не работает, любая идея, как это сделать.

Источник

2 ответа

Решение

Это также заняло у меня много времени... с лучшей информацией это было бы 5 минут!

Я использую response-native-fs для получения каталогов (который работает для ios и android):

var RNFS = require('react-native-fs');

RNFS.DocumentDirectoryPath затем возвращает что-то вроде '/var/mobile/Containers/Data/Application/15AC1CC6-8CFF-48F0-AFFD-949368383ACB/Documents' на iOS

Мой элемент Image выглядит следующим образом:

<Image
          style={{width:100, height:100}}
          source={{uri: 'file://' + RNFS.DocumentDirectoryPath + '/myAwesomeSubDir/my.png', scale:1}}
        />

Моя проблема заключалась в том, что я сначала не задавал ширину и высоту, которые не нужны для URL-адресов или путей к ресурсам. При использовании base64 uri ширина и высота также обязательны (что фактически привело меня к решению!).

Источник

Попробуйте тильду (~). React Native должен расширить это.

`` `

<Image
   style={{width:100, height:100}}
   source={{uri: '~/Documents/myAwesomeSubDir/my.png', scale:1}}
/>

`` `

Источник
Другие вопросы по тегам