Внутреннее и внешнее хранилище в react native

Я работаю с react native на работе уже 3 года, но я не касался файловой системы.

Недавно я создал приложение под названием PreCloud: Encrypt before upload, с помощью которого вы можете шифровать тексты и файлы, а затем загружать зашифрованные тексты и файлы куда угодно, превращая любого облачного провайдера в зашифрованное хранилище. Это бесплатно и с открытым исходным кодом. Попробуйте 🙂

В этом посте я расскажу об управлении файлами с помощью react native.


Используемые библиотеки

  • react-native-document-picker: Выбирает файлы из телефона;
  • react-native-fs: Управление файлами во внутреннем хранилище вашего приложения, подробнее об этом позже;
  • react-native-share: Делиться файлами с другими приложениями;
  • react-native-file-viewer: Просмотр файлов в вашем приложении;

Два вида хранилища

1. Интертальное хранилище

У каждого приложения есть собственное хранилище, к которому другие приложения не имеют доступа. Например, это папка Cache моего приложения в Simulator:

/Users/penghui/Library/Developer/CoreSimulator/Devices/5BAEC586-2BA0-42A0-B615-926F1A4D59A0/data/Containers/Data/Application/EBB8401E-3B16-4A3E-98A1-D2DDC3900A90/Library/Caches
Войти в полноэкранный режим Выход из полноэкранного режима

А это папка Documents:

/Users/penghui/Library/Developer/CoreSimulator/Devices/5BAEC586-2BA0-42A0-B615-926F1A4D59A0/data/Containers/Data/Application/EBB8401E-3B16-4A3E-98A1-D2DDC3900A90/Documents
Войти в полноэкранный режим Выйти из полноэкранного режима

Есть и другие папки, но меня пока интересуют только эти две. Полный список вы можете посмотреть в документе react-native-fs doc с более подробным объяснением.

Я думаю, что это те места, где Spotify сохраняет загруженную музыку, а Youtube — загруженное видео.

react-native-fs — это идеальный инструмент для работы с файлами во внутреннем хранилище, вы можете проверить их документацию, чтобы найти нужные вам функции.

Но, как уже упоминалось, файлы во внутреннем хранилище не могут быть просмотрены приложением Files или Photos, и вы также не можете просто читать файлы из внешнего хранилища.

2. Внешнее хранилище

Это обычное хранилище, которое вы видите на своем телефоне, это то, что вы видите в приложении Files, как для iOS, так и для Android.


Перемещение файлов

1. От внешнего к внутреннему

react-native-fs (почти) предназначен только для обработки внутренних файлов. Поэтому прежде чем он сможет что-то сделать с файлом, его нужно переместить из внешнего хранилища.

Для этого нам нужен react-native-document-picker.

Нам нужна функция pick, которая откроет подборщик файлов. Мы можем указать параметр copyTo, он поддерживает 2 значения: cachesDirectory и documentDirectory. После того, как пользователь выберет файл или несколько файлов в функции выбора файлов, выбранный файл/файлы будут скопированы в папку Caches или Documents внутреннего хранилища вашего приложения. Та-да.

Примечание: react-native-document-picker может выбирать все внешние файлы на Android (ваши изображения, файлы и т.д.), но на iOS он может выбирать только файлы в приложении Files, он не может выбирать изображения в приложении Photos. Вам нужно сначала «поделиться» изображением с помощью опции «Сохранить в файлы», затем изображение будет перемещено в Files, после чего вы сможете выбрать его с помощью react-native-document-picker.

Если вам нужно выбрать изображение, есть несколько других библиотек, я их не пробовал, но они должны быть простыми.

2. Из внутреннего хранилища во внешнее

Файл перемещен во внутреннее хранилище, и вы сделали какую-то причудливую обработку (Для меня, я шифрую файл, см. код здесь), затем вы хотите переместить обработанный файл во внешнее хранилище.

Android

На Android все просто, react-native-fs может сделать эту работу (помните «почти» в «react-native-fs почти только для обработки внутренних файлов»?) У него есть DownloadDirectoryPath, который доступен только на Android.

Вы можете использовать функцию copyFile:

  await RNFS.copyFile(internalFilePath, `RNFS.DownloadDirectoryPath/${fileName}`);
Войти в полноэкранный режим Выйти из полноэкранного режима

После этого файл будет скопирован в папку Download внешнего хранилища. Готово.

Вы можете посмотреть реальный код здесь.

iOS

Но на iOS я не нашел простого способа переместить файл подобным образом.

В итоге я использовал react-native-share. Он откроет нижнюю панель инструментов share files, затем вы можете выбрать опцию «Save to Files», чтобы загрузить его в приложение Files.

react-native-share также работает на Android, конечно.

И я неправильно использовал опцию saveToFiles 🙂 Флаг доступен только для iOS. Если он ложный, и, например, вы делитесь изображением, то в открывшейся панели инструментов share будут другие опции, например, добавить изображение в альбом; но когда saveToFiles истинный, панель инструментов покажет только опцию «Сохранить в файлы».

Поэтому в моем приложении у меня есть 2 иконки под файлом, одна иконка загрузки, для которой я установил флаг saveToFiles в true, и одна иконка обмена, для которой я установил флаг saveToFiles в false.

На самом деле есть еще один способ, который я нашел в этом ответе, это установить флаг UISupportsDocumentBrowser в Info.plist на true, и использовать react-native-fs для сохранения файлов в папку Documents внутреннего хранилища, тогда файлы будут доступны приложению Files, вот и все!
Я попробовал, это работает, но мне это не нравится, я чувствую, что у меня меньше контроля.

Если вы знаете лучший способ загрузки файлов на iOS, пожалуйста, дайте мне знать!


Бонус: просмотр внутренних файлов в вашем приложении

Вы можете использовать либу react-native-file-viewer lib для открытия внутренних файлов, таких как изображение, PDF-файл и т.д. Она очень проста в использовании, попробуйте.


Вы можете проверить весь код моего приложения на github;

И если вам интересно, попробуйте мое приложение PreCloud, чтобы защитить вашу конфиденциальность.
Play store: https://play.google.com/store/apps/details?id=com.precloud
App store: https://apps.apple.com/us/app/precloud/id1638793841

Как я уже сказал в начале, оно бесплатное, с открытым исходным кодом, без отслеживания и без сервера.

Оцените статью
devanswers.ru
Добавить комментарий