react-native 集成react-native-image-crop-picker，使用相册相机功能

先是安装 和链接

npm i react-native-image-crop-picker --save  
react-native link react-native-image-crop-picker  

android 配置

1.Gradle版本必须大于2.2，查看工程的android/build.gradle中默认gradle版本：

    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.3'  

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }

2. 将以下内容添加到您android/build.gradle的存储库部分

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
       // jitpack repo是获取ucrop依赖性所必需的
        maven { url "https://jitpack.io" }
    }
}

这一步 我在别人文章里面没看到，配置出来 无法启动，后面看了官方文档，才知道还有这一步，如图

我加的就是 这段  

 

3.打开android/app/build.gradle    添加

android {  
    ...  
  
    defaultConfig {  
        ...  
        vectorDrawables.useSupportLibrary = true  
        ...  
    }  
    ...  
}  

 

4.打开 android/app/src/main/AndroidManifest.xml配置文件，添加相机权限：

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

 

ios 配置

1.在Xcode中打开Info.plist，并添加带有值的字符串键 NSPhotoLibraryUsageDescription，描述为什么需要访问用户照片 以及NSCameraUsageDescription和NSMicrophoneUsageDescription。

　添加下面3个

NSPhotoLibraryUsageDescription
NSCameraUsageDescription
NSMicrophoneUsageDescription

2.添加依赖

Cocapods的用户 ：

　　　　　　 （1） 在Deployment Info标签下，设置Deployment Target平台版本为：8.0'
      　　　　（2） 将pod'RSKImageCropper'和pod'QBImagePickerController'添加到Podfile

非Cocapods用户：

　　　　(1).将 node_modules/react-native-image-crop-picker/ios/ImageCropPickerSDK 文件夹拖放的xcode项目根目录下

　　　　(2).单info选项卡 在Deployment Info标签下，设置Deployment Target平台版本为：8.0

　　　　(3).选择Embedded Binaries单击  +  并添加  RSKImageCropper.framework  和  QBImagePicker.framework

　　

　

 

 使用

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

//从本地相册选择单幅图像

ImagePicker.openPicker({  
  width: 300,  
  height: 400,  
  cropping: true  
}).then(image => {  
  console.log(' 图片路径：'+ image);  
});  


//调用多个图像

ImagePicker.openPicker({  
  multiple: true  
}).then(images => {  
  console.log(images);  
}); 




//启动相机拍照

ImagePicker.openCamera({  
  width: 300,  
  height: 400,  
  cropping: true  
}).then(image => {  
  console.log(image);  
});



//裁剪已有的图片

ImagePicker.openCropper({  
  path: 'my-file-path.jpg',  
  width: 300,  
  height: 400  
}).then(image => {  
  console.log(image);  
}); 

最后补充下遇到问题：

拍照或者选取照片完成后：

安卓上 不要用alert 去查看 是否取到 图片路径，因为 它不会执行alert ，不知道为什么但是事实是这样，我也是遇到了，然后试了别的方法，才知道这个问题的存在，

可以先把它转成字符串，存到 state 里在页面上显示出来，就可以看到了，

还有android  上不能多选，暂时没找解决办法，如果有解决了的，还请告诉我一下，多谢

 

https://www.npmjs.com/package/react-native-image-crop-picker

　　　　 

转载于:https://www.cnblogs.com/bruce-gou/p/8623415.html