先是安装 和链接

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: ,
height: ,
cropping: true
}).then(image => {
console.log(' 图片路径:'+ image);
}); //调用多个图像 ImagePicker.openPicker({
multiple: true
}).then(images => {
console.log(images);
}); //启动相机拍照 ImagePicker.openCamera({
width: ,
height: ,
cropping: true
}).then(image => {
console.log(image);
}); //裁剪已有的图片 ImagePicker.openCropper({
path: 'my-file-path.jpg',
width: ,
height:
}).then(image => {
console.log(image);
});

最后补充下遇到问题:

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

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

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

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

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

    

react-native 集成react-native-image-crop-picker,使用相册相机功能的更多相关文章

  1. react native 集成react navigation报错

    集成后出现:“Invalid escape sequence at line 1 column 29 path $[0].name”的错误. 解决办法:

  2. 现有iOS项目集成React Native过程记录

    在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...

  3. iOS原生项目中集成React Native

    1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境. 2.使用Xcode新建一个工程.EmbedRNMeituan [图1] 3.使用CocoaPods安装Re ...

  4. iOS原生项目集成React Native模块

    今天周末,弄弄Native和React Native之间的交互.首先,先在iOS原生项目中集成React Native模块: 注意事项: 1.因为react native的版本问题,部分细节可能有所不 ...

  5. 将React Native 集成进现有OC项目中(过程记录) 、jsCodeLocation 生成方式总结

    将RN集成到现有OC项目应该是最常见的,特别是已经有OC项目的,不太可能会去专门搞个纯RN的项目.又因为RN不同版本,引用的依赖可能不尽相同,所以特别说明下,本文参考的文档是React Native ...

  6. 将React Native集成至Android原生应用

    将React Native集成至Android原生应用 Android Studio 2.1 Preview 4生成的空项目 react-native 环境 0.22.2 初次编译后apk有1.1M, ...

  7. React Native集成Redux框架讲解与应用

    学过React Native的都知道,RN的UI是根据相应组件的state进行render的,而页面又是由大大小小的组件构成,导致每个组件都必须维护自身的一套状态,因此当页面复杂化的时候,管理stat ...

  8. Angular团队公布路线图,并演示怎样与React Native集成

    本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/06/angular-2-react-native-roadmap 前不久在旧 ...

  9. react native 之 在现有的iOS工程中集成react native

    在现有的iOS工程中集成react native, 或者说将react native引入到iOS 项目,是RN和iOS混合开发的必经之路 参考官网教程:https://reactnative.cn/d ...

随机推荐

  1. elasticsearch 口水篇(7) Eclipse中部署ES源码、运行

    ES源码可以直接从svn下载 https://github.com/elasticsearch/elasticsearch 下载后,用Maven导入(import——>Existing Mave ...

  2. Qt QListWidget实现图片缩略图列表

    转载:v_xchen_v 目标: 将本机中的多张图片以缩略图的形式显示在列表中 环境: 我们已经做好了菜单栏和文件选择对话框.参考:http://blog.csdn.net/v_xchen_v/art ...

  3. Microsoft Office 2016 简体中文 Vol 版镜像下载

    在使用上,零售版和批量授权版并没有区别,只是授权方式方面的区别,相对而言,VOL 版的更容易激活一些,其他并没有什么区别了. 有需要的可以在下面下载:(以下均是 VL 版) 版本:Office 201 ...

  4. bzoj4939: [Ynoi2016]掉进兔子洞

    将权值排序,设权值x排序后在[l,r]出现,x在区间中出现k次,则用[l,l+k-1]为1,[l+k,r]为0来表示x的出现次数 用bitset表示可重集中每个元素的出现次数,用莫队处理出询问区间对应 ...

  5. P1616疯狂的采药

    传送 它不是可爱的01背包了!!!这个题中一种药可以采无限次!!! 它进化成了完全背包.完全背包中的内循环从m到v[i]改成了从v[i]到m 既然如此,代码如下: #include<iostre ...

  6. 即用了 测试脚本里面的 类的值,又继承了 unittest类 使用他的断言方法 (接口自动化 数据分离 变量相互调用 看这里)

  7. 如何修改CSV文件的分隔符

    Excel转成CSV文件,在Windows下默认的列表分隔符是逗号(,).在某些情况下,我们可能需要更改列表分隔符,如某个单元格内容包含逗号,而这可能导致使用它的程序出错,这样就需要更改列表分隔符:再 ...

  8. MySQL数据库InnoDB存储引擎中的锁机制(转载)

    http://www.uml.org.cn/sjjm/201205302.asp 00 – 基本概念 当并发事务同时访问一个资源的时候,有可能导致数据不一致.因此需要一种致机制来将访问顺序化. 锁就是 ...

  9. IKE协议

    IKE协议 一. +IKE(Internet Key Exchange)因特网密钥交换协议 +为IPSec提供了自动协商交换密钥.建立安全联盟的服务 +通过数据交换来计算密钥 IKE(Internet ...

  10. [UE4]最简单的虚幻4网络游戏,使用虚幻4内置服务器

    一.设置游戏窗口合适的大小 二.在新窗口中运行游戏.玩家数量改成大于1.   三.运行游戏就会打开多个窗口 在打包完成的游戏中进行网络游戏: 一.虚幻4打包好的文件是放在WindowsNoEditor ...