Я работаю с 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
Как я уже сказал в начале, оно бесплатное, с открытым исходным кодом, без отслеживания и без сервера.