ReactNative-拍照、相册选择(react-native-image-picker)接入使用教程

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 ../

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

推荐阅读更多精彩内容

  • 有一段时间没有写东西了,因为最近项目开始尝试使用React Native(以下简称RN)来开发,所以这段时间一直在...
    宫城_阅读 4,299评论 6 32
  • 做过RN开发的同学肯定对react-native-cli命令行工具不陌生,官方文档一开始在搭建开发环境的章节就会介...
    注定暂时漂泊xxx阅读 224评论 0 2
  • 文/大道至简(河北) 你只看到闸上溢出的水 可否留意到下游的我眼中也噙满了泪 其实 你并不在意我的表白 季节的挑逗...
    丝雨禅心阅读 265评论 4 7
  • 姐姐,一种称谓,同族亲属中同辈而且年龄比自己大的女子。 不知从什么时候起,我和姐姐的感情越来越好,殊不知,在小时候...
    天一生雪阅读 148评论 0 1
  • 05年拥有了自己的第一胎电脑,那年10岁。小学四年级,我接触的第一个大型游戏就是热血江湖。 那个时候是寒假,每天晚...
    慢半拍儿的闪电阅读 393评论 0 0
  • springmvc+mybatis+maven整合视频 http://www.java1234.com/a/jav...
    zhuyuansj阅读 424评论 0 2