在 React Native 应用开发中，文件选择器是非常常见的需求。通常情况下，我们需要使用第三方库实现该功能。而本文介绍的 react-native-nononsense-file-picker 就是一款非常优秀的 React Native 文件选择器库，支持多种文件类型的选择，用法简单易懂，性能稳定，值得推荐给前端工程师使用。
安装
首先，我们需要通过 npm 来下载安装该库，打开终端输入：
npm install react-native-nononsense-file-picker --save
安装完毕后，我们需要 link 该库至项目中，使用如下命令：
react-native link react-native-nononsense-file-picker
此时，我们已成功集成了 react-native-nononsense-file-picker 库。
使用
导入
在使用该库之前，需要导入相关模块：
import FilePickerManager from 'react-native-nononsense-file-picker';
打开文件选择器
以下是一个打开文件选择器并选择文件的示例：
-- -------------------- ---- -------
------------------ -
-------------
---------- - -
--------- --
--
-
---------- - -- -- -
----- ------- - -
------ --------- -- ----
----------- ----- -- ------
-------------- ------- -- --------
--------------- ------- -- --------
--------------- ------- -- --------
--------------- ------- -- --------
---------- -------- -- ---------
--
----------------------------------------- ---------- -- -
--------------------- - -- ----------
-- -------------------- -
-----------------------
- ---- -- ---------------- -
----------------------- ----------------
- ---- -
--------------- --------- ------------- ---
-
---
-
-------- -
------ -
------
------------------- ----------- -- - ----------------- ---
-----------------
---------------------
-------------------------------------------
-------
--
-参数说明
FilePickerManager.showFilePicker(options, callback) 支持以下参数：
title（可选）：文件选择器标题，默认为"选择文件"。cancelText（可选）：取消按钮文本，默认为"取消"。pickFileTitle（可选）：文件选择按钮文本，默认为"选择文件"。pickPhotoTitle（可选）：图片选择按钮文本，默认为"选择图片"。pickVideoTitle（可选）：视频选择按钮文本，默认为"选择视频"。pickAudioTitle（可选）：音频选择按钮文本，默认为"选择音频"。type（可选）：选择器弹窗类型，可选值是"all","photo","video","audio","file", 默认为"file"。filesType（可选）：允许选择的文件类型，可以传入一个数组表示多选，示例：['audio/mpeg', 'video/*']，默认为['*/*']。cameraType（可选）：选择器打开时默认（初始）的页面，可选值是"front","back", 默认为"back"。storageOptions（可选）：选择器的可选参数，参数详情见官方文档：react-native-image-picker StorageOptionspath（可选）：设置选择器默认打开的文件路径，用于快速定位文件夹，默认为null。
回调参数说明
callback(response) 返回以下参数：
path：选中文件的路径。uri：选中文件的 Uri。type：文件类型。fileName：文件名称。fileSize：文件大小。width（图片类型专属）：图片宽度。height（图片类型专属）：图片高度。didCancel：用户是否取消了选择。error：出错信息，如果用户没有取消选择，该值为null。
结语
通过本文的介绍，我们了解了 react-native-nononsense-file-picker 库的基本使用方法。希望本文对初学者有所帮助，也欢迎前端工程师们试用该库，并在开发中使用该库实现文件选择器，加速项目开发，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5b81e8991b448e5e04