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: ,
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,使用相册相机功能的更多相关文章
- react native 集成react navigation报错
集成后出现:“Invalid escape sequence at line 1 column 29 path $[0].name”的错误. 解决办法:
- 现有iOS项目集成React Native过程记录
在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...
- iOS原生项目中集成React Native
1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境. 2.使用Xcode新建一个工程.EmbedRNMeituan [图1] 3.使用CocoaPods安装Re ...
- iOS原生项目集成React Native模块
今天周末,弄弄Native和React Native之间的交互.首先,先在iOS原生项目中集成React Native模块: 注意事项: 1.因为react native的版本问题,部分细节可能有所不 ...
- 将React Native 集成进现有OC项目中(过程记录) 、jsCodeLocation 生成方式总结
将RN集成到现有OC项目应该是最常见的,特别是已经有OC项目的,不太可能会去专门搞个纯RN的项目.又因为RN不同版本,引用的依赖可能不尽相同,所以特别说明下,本文参考的文档是React Native ...
- 将React Native集成至Android原生应用
将React Native集成至Android原生应用 Android Studio 2.1 Preview 4生成的空项目 react-native 环境 0.22.2 初次编译后apk有1.1M, ...
- React Native集成Redux框架讲解与应用
学过React Native的都知道,RN的UI是根据相应组件的state进行render的,而页面又是由大大小小的组件构成,导致每个组件都必须维护自身的一套状态,因此当页面复杂化的时候,管理stat ...
- Angular团队公布路线图,并演示怎样与React Native集成
本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/06/angular-2-react-native-roadmap 前不久在旧 ...
- react native 之 在现有的iOS工程中集成react native
在现有的iOS工程中集成react native, 或者说将react native引入到iOS 项目,是RN和iOS混合开发的必经之路 参考官网教程:https://reactnative.cn/d ...
随机推荐
- Lucene 特殊字符的问题
SolrQuerySyntax http://wiki.apache.org/solr/SolrQuerySyntax solr的处理方式: https://svn.apache.org/repos/ ...
- Flex组件参考 代码参考汇总
1:tourdeflex快速熟悉各种组件用法的参考http://www.adobe.com/devnet/flex/tourdeflex.html在线:http://www.adobe.com/dev ...
- Ubuntu 14.10 下SSH配置
安装Hadoop时候需要设置SSH ,故将此过程记录下来 推荐安装 OpenSSH , Hadoop 需要通过 SSH 来启动 Slave 列表中各台主机的守护进程,因此 SSH 是必需安装的.虽 ...
- ObjectId与DateTime的互相转换
s会用mongdb中经常会需要用到通过“_id”去检查数据,筛选数据,但是想根据具体时间的id每次都需要做一下转换,这样搜索起来就很简单了. ObjectId转DateTime /// <sum ...
- Razor语法记录
虽然现在用着ASP.NET MVC但是cshtml使用Razor的标准形式去布局用的还是很少,这里就一点点把用到的关键点慢慢记下来,方便自己日后回忆吧! 1.将Action中返回的html字符串转换为 ...
- 三星GT-N8010刷机教程
本刷机教程只针对三星GT-N8010机器(以下简称GT-N8010),以下操作本人已在GT-N8010机器上亲测,且都成功,其它机器没有测试不能保证成功. 刷机有风险,请谨慎使用!请先备份资料和信息. ...
- 峰Redis学习(8)Redis 持久化AOF方式
第三节:Redis 的持久化之AOF 方式 AOF方式:将以日志,记录每一个操作 优势:安全性相对RDB方式高很多: 劣势:效率相对RDB方式低很多: 1)AOF方式需要配置: # Please ...
- 客户端负载均衡Ribbon之一:Spring Cloud Netflix负载均衡组件Ribbon介绍
Netflix:['netfliːks] ribbon:英[ˈrɪbən]美[ˈrɪbən]n. 带; 绶带; (打印机的) 色带; 带状物;v. 把…撕成条带; 用缎带装饰; 形成带状; L ...
- [转][C#]Combobox 行高
namespace System.Windows.Forms { class ComboBoxEx : ComboBox { public ComboBoxEx() { DrawMode = Syst ...
- 关于git中自己的分支和主分支有冲突的解决方案(git和乌龟git)
阐述一个案例,最近在开发中遇到一个问题.自己在代码的主分支拉了一个分支,开始快乐的开发修改了.同事小明也在主分支拉了一个分支,也在快乐的修改.小明的开发速度很快,一个问题很快就解决了,并且把自己的代码 ...