我在工作中使用 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文件夹:

/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文档中查看完整列表,并提供更多说明。

我认为这些是 Spotify 保存您下载的音乐和 Youtube 保存您下载的视频的地方。

react-native-fs是处理内部存储文件的完美工具,您可以查看他们的文档以找到您需要的功能。

但如前所述,手机Filesapp或Photosapp无法查看内部存储中的文件,也无法仅从外部存储中读取文件。

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上,很简单,react-native-fs可以完成这项工作(还记得“react-native-fs 几乎只用于处理内部文件”中的“几乎”吗?)它有一个DownloadDirectoryPath,其中仅在 Android 上可用。

可以使用copyFile函数:

  await RNFS.copyFile(internalFilePath, `RNFS.DownloadDirectoryPath/${fileName}`);

进入全屏模式 退出全屏模式

然后将该文件复制到外部存储的Download文件夹中。完毕。

你可以在这里看到一些真实的代码。

iOS

但是在 iOS 上,我还没有找到一种简单的方法来移动这样的文件。

我最终使用了react-native-share。它将打开一个共享文件底部工具箱,然后您可以选择“保存到文件”选项将其下载到Files应用程序。

react-native-share 当然也适用于 Android。

而且我误用了saveToFiles选项 :) 该标志仅适用于 iOS。如果为假,比如你正在分享一张图片,打开的分享工具箱会有其他选项,比如将图片添加到相册;但是当saveToFiles为 true 时,工具箱将只显示“保存到文件”选项。

所以在我的应用程序中,我在一个文件下有 2 个图标,一个下载图标,我将saveToFiles标志设置为 true,还有一个共享图标,我将saveToFiles标志设置为 false。

实际上我在这个答案中找到了另一种方法,即你将Info.plist中的UISupportsDocumentBrowser标志设置为 true,然后使用 react-native-fs 将文件保存到内部存储的Documents文件夹中,然后是文件Files应用程序可以访问,就是这样!

我试过了,它有效,但我不喜欢它,我觉得我的控制力较差。

如果您知道在 iOS 上下载文件的更好方法,请告诉我!

---

奖励:在您的应用程序中查看内部文件

您可以使用react-native-file-viewerlib 来打开内部文件,如图像、PDF 文件等。它非常易于使用,试试看。

---

您可以在github中查看我所有应用程序的代码;

如果您有兴趣,请尝试我的PreCloud应用程序,以保护您的隐私。

游戏商店:https://play.google.com/store/apps/details?idu003dcom.precloud

应用商店:https://apps.apple.com/us/app/precloud/id1638793841

就像我一开始说的,它是免费的、开源的,而且没有跟踪和服务器。