在 React Native 的开发中，我们常常需要进行文件的读写操作，这时候我们就需要用到一个优秀的第三方库 —— react-native-fs。该库支持 iOS 和 Android 两个平台，提供了一整套文件的读写 API，可以让我们轻松地操作本地文件系统。
安装
node.js 是必须的，您需要在本地安装它才能使用npm。npm 是 node.js 自带的包管理工具，通过它可以方便地安装和使用 react-native-fs 这个 npm 包。
安装命令如下：
npm install react-native-fs --save
注：请注意，根据您的网络连接速度，此过程可能需要一些时间。
使用
安装完成之后，可以在 react-native 中引用该库。假设我们想在一个页面中读取本地文件，那么我们只需要这样做：
-- -------------------- ---- ------- ------ ---- ---- ------------------ ------------------------------ ------- ---------------- -- - ---------------------- -- ------------ -- - ------------------------- ---展开代码
API
RNFS.readDir(path: string): Promise<ReadDirItem[]>
读取指定目录下的所有文件和文件夹信息。
RNFS.stat(path: string): Promise<StatResult>
读取文件或文件夹的状态信息。
RNFS.readFile(filepath: string, encoding?: string): Promise<string>
以指定编码格式读取指定文件的内容。
RNFS.writeFile(filepath: string, contents: string, encoding?: string): Promise<void>
向指定文件写入内容。
RNFS.moveFile(filepath: string, destPath: string): Promise<void>
将指定文件移动到另一个路径。
RNFS.unlink(filepath: string): Promise<void>
删除指定文件。
...
更多 API 详见 官方文档。
示例
下面让我们来看一个具体的例子，假设我们使用 readFile 方法读取 ~/Documents/file.txt 文件的内容，并将结果展示在当前页面上：
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ - ----- ---- - ---- --------------- ------ ---- ---- ------------------ ------ ------- ----- --- ------- --------- - ------------------ - ------------- ---------- - - -------- -- -- - ------------------- - ------------------------------------------------------- ------- ---------------- -- - --------------- -------- -------- --- -- ------------ -- - ------------------------- --- - -------- - ------ - ----- ------------------------- --------------------------------- ------- -- - - ----- ------ - - ---------- - ----- -- --------------- --------- ----------- -------- -- --展开代码
在这个例子中，我们将 DocumentDirectoryPath 和 file.txt 字符串拼接起来，即可得到完整的文件路径，然后调用 readFile 方法读取文件内容，并使用 setState 更新组件状态以展示文件内容。
总结
react-native-fs 为我们提供了方便、易用且性能良好的文件读写 API，使得我们能够更好地操作本地文件系统。熟练掌握该 npm 包的使用方法，可以让我们更快、更好地完成 React Native 项目的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f111c66403f2923b035c24c
