在移动端应用程序开发中，用户上传照片或者选择照片是非常常见的功能，这里我们来介绍在 React Native 中实现选择照片的方法。
本教程分为以下三个部分：
- React Native 中的 Image Picker 系统库
- 图片库选择器的自定义实现
- 示例代码
1. React Native 中的 Image Picker 系统库
React Native 官方已经为开发者提供了一个叫做 Image Picker 的系统库。首先需要通过以下命令安装该库：
yarn add react-native-image-picker
或者使用 npm 安装：
npm install react-native-image-picker --save
安装完成后，需要进行配置。如果使用 react-native link 自动链接配置：
react-native link react-native-image-picker
或者手动进行配置，更改 ios/[PROJECT_NAME]/Info.plist 文件，增加以下代码：
<key>NSCameraUsageDescription</key> <string>Your message to user when the camera is accessed for the first time</string> <key>NSPhotoLibraryUsageDescription</key> <string>Your message to user when the photo library is accessed for the first time</string> <key>NSMicrophoneUsageDescription</key> <string>Your message to user when the microphone is accessed for the first time</string>
然后在代码中使用：
-- -------------------- ---- ------- ------ ----------- ---- ---------------------------- ------------------------------------ ---------- -- - --------------------- - -- ---------- -- -------------------- - ----------------- --------- ----- --------- - ---- -- ---------------- - ------------------------ ------ -- ---------------- - ---- -- ----------------------- - ----------------- ------ ------ ------- -- ----------------------- - ---- - ----- ------ - - ---- ------------ -- -- --- --- ---- ------- --- ----- ----- ----- -- ----- ------ - - ---- ------------------------- - ------------- -- --------------- ------------- ------- --- - ---展开代码
使用 showImagePicker 方法可以打开一个界面来选择图片，参数 options 是选择的配置参数，例如设置选择的图片尺寸等。
2. 图片库选择器的自定义实现
如果想要自定义实现照片选择器，可以使用 react-native-camera-roll-picker 库，首先需要通过以下命令安装该库：
yarn add react-native-camera-roll-picker
或者使用 npm 安装：
npm install react-native-camera-roll-picker --save
然后使用以下代码：
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ - ---- - ---- --------------- ------ ---------------- ---- ---------------------------------- ----- ----- ------- --------- - ------------------ - ------------- ---------- - - --------- --- -- - ------------------------- - --------------- --------- ------- --- - -------- - ------ - ------ ----------------- -------------------------------------------- -- ------- -- - -展开代码
运行以上代码会打开一个图片库选择器，并支持多选和单选，选择的结果将会传递到 getSelectedImages 方法中。
3. 示例代码
下面展示一个完整的示例代码。点击按钮打开一个图片选择器，选择之后会显示选择的结果。
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ - ----- ------ ------ - ---- --------------- ------ ----------- ---- ---------------------------- ------ ---------------- ---- ---------------------------------- ----- ----- ------- --------- - ------------------ - ------------- ---------- - - --------- --- ------------- ----- -- - ------------------------- - --------------- --------- ------- --- - ------------- - ----- ------- - - ------ ------- -------- --------------- - ----------- ----- ----- --------- -- -- ------------------------------------ ---------- -- - --------------------- - -- ---------- -- -------------------- - ----------------- --------- ----- --------- - ---- -- ---------------- - ------------------------ ------ -- ---------------- - ---- -- ----------------------- - ----------------- ------ ------ ------- -- ----------------------- - ---- - ----- ------ - - ---- ------------ -- --------------- ------------- ------- --- - --- - -------- - ------ - ------ ------- ------------- ------ ------------------------------------- -- ------------------------ -- - ------ -------------------------------- -------- ------ ---- ------- --- -- -- -- ----------------- -------------------------------------------- -- ------- -- - - ------ ------- ------展开代码
以上是一个完整的例子，简单易懂，适合初学者学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c1cb13314edc2684a8cd2d
