Record_2020-04-27-16-18-29_edff3d4e83b0070286d2e7.gif a3pp1-t84tp.gif

首先放出轮子大哥的链接：react-native-image-picker

好了，下面跟着我一步步配置吧。

1 依赖

yarn add react-native-image-picker

完成了之后在项目终端里执行
如果你的rn版本大于0.60则执行

cd ios && pod install && cd ../

否则执行

react-native link react-native-image-picker

啥，你的RN版本低到要手动依赖?还是先更新上来吧都2020年了！

2 配置

2.1 IOS

你可以用xcode打开项目的ios文件夹里的“你的项目名称”.xcworkspace，也可以直接在当前ide直接修改文件

2.1.1 xcode里的修改方法（选其一）

image.png

点击+号 添加对应的4个权限（访问、保存图片，调起相机，录像）

2.1.2 直接修改文件（选其一）

打开info.plist文件

image.png

添加

    <key>NSPhotoLibraryUsageDescription</key>
    <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your camera</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your microphone (for videos)</string>

（key-string一对一对的）
好了，ios配置完成，然后滚去配置android

2.2 Android

2.2.1 android studio里的修改方法（选其一）

使用android studio打开项目的android文件夹，找到以下地方

image.png

添加

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

最好再加一个（不要问！）

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

2.2.2 直接修改文件（选其一）

一个道理，在项目的android/app/src/main/底下的AndroidManifest.xml文件里加入

image.png

好了，Android也配置完了。

3 使用

导入库

import ImagePicker from 'react-native-image-picker';

在你点击的时候调用

ImagePicker.showImagePicker(options, (response) => {
      console.log('Response = ', response);
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        Alert.alert('自定义按钮:' + response.customButton)
      } else {
        const source = { uri: response.uri };
        Alert.alert(JSON.stringify(source))
        console.log("source:" + JSON.stringify(source))
      }
    });

其中options的参数是(更多的配置可以去github的api里面找，里面有每一个参数的解释)

const options = {
    title: '请选择',
    cancelButtonTitle:'取消',
    takePhotoButtonTitle:'拍照',
    chooseFromLibraryButtonTitle:'从相册选择',
    storageOptions: {
      skipBackup: true,
      path: 'images',
    },
  };

以上代码是包含相机以及相册（ui+功能），如果你想要直接触发某项功能，可以调用以下方法

function openCamera(){
    ImagePicker.launchCamera(options , (response) =>{
      console.log("response:" + response.path)
    })
  }

  function openImageLibrary(){
    ImagePicker.launchImageLibrary(options , (response) =>{
      console.log("response:" + response.path)
    })
  }

关于response的返回值在github的api里也有详细说明。

好了，介绍结束，其实还有个更高star的库react-native-camera，而且是有人脸识别功能的，但我觉得普通项目用本文这个已经够用了。

ps:如果跑项目报了一些莫名其妙的错误，可以试着删除node_modules，然后在项目命令行里执行

npm install

顺便重新执行

cd ios && pod install && cd ../

反正好几次我都这样莫名其妙的搞定了莫名其妙的报错...