react native android6+拍照闪退或重启的解决方案

前言

android 6+权限使用的时候需要动态申请,那么在使用rn的时候要怎么处理拍照权限问题呢?本文提供的是一揽子rn操作相册、拍照的解决方案,请看正文的提高班部分。

解决步骤

1、AndroidManifest.xml设置拍照权限:

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

2、配置build.gradle:

设置defaultConfig里面的targetSdkVersion>=23.

3、在需要使用的地方或者程序启动之后的主页面的构造中申请相机权限,代码如下:

async requestCameraPermission() {
    if (Platform.OS == 'ios') return true;
    //申请相机权限
    try {
        const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA, {
            title: '申请摄像头权限',
            message: '一个很牛逼的应用想借用你的摄像头'
        });
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            console.log('现在你获得摄像头权限了');
            return true;
        } else {
            console.log('用户并不屌你');
            return false;
        }
    } catch (err) {
        console.warn(err);
        return false;
    }
}

拍照之前调用上面的方法:

this.requestCameraPermission(); //申请相机权限

提高班

多图选择、图片裁剪(支持ad/ios图片个数控制)推荐使用react-native-syan-image-picker,使用教程查看《react-native多图选择、图片裁剪(支持ad/ios图片个数控制)》

小技巧:react-native-syan-image-picker 版本V0.0.5 安卓6+ 拍照问题有点问题,我已经pull request,作者已经合并,稍后测试问题之后,即可发布,如果着急使用贴出解决代码。

1.修改build.gradle如图:

2、修改RNSyanImagePickerModule.java更新2.1.7配置,代码如下:

.openGallery(PictureMimeType.ofImage())//全部.PictureMimeType.ofAll()、图片.ofImage()、视频.ofVideo()、音频.ofAudio()
.maxSelectNum(imageCount)// 最大图片选择数量 int
.minSelectNum(1)// 最小选择数量 int
.imageSpanCount(4)// 每行显示个数 int
.selectionMode(modeValue)// 多选 or 单选 PictureConfig.MULTIPLE or PictureConfig.SINGLE
.previewImage(true)// 是否可预览图片 true or false
.previewVideo(false)// 是否可预览视频 true or false
.enablePreviewAudio(false) // 是否可播放音频 true or false
.isCamera(isCamera)// 是否显示拍照按钮 true or false
.imageFormat(PictureMimeType.PNG)// 拍照保存图片格式后缀,默认jpeg
.isZoomAnim(true)// 图片列表点击 缩放效果 默认true
.sizeMultiplier(0.5f)// glide 加载图片大小 0~1之间 如设置 .glideOverride()无效
.enableCrop(isCrop)// 是否裁剪 true or false
.compress(true)// 是否压缩 true or false
.glideOverride(160, 160)// int glide 加载宽高,越小图片列表越流畅,但会影响列表图片浏览的清晰度
.withAspectRatio(CropW, CropH)// int 裁剪比例 如16:9 3:2 3:4 1:1 可自定义
.hideBottomControls(isCrop)// 是否显示uCrop工具栏,默认不显示 true or false
.isGif(isGif)// 是否显示gif图片 true or false
.freeStyleCropEnabled(true)// 裁剪框是否可拖拽 true or false
.circleDimmedLayer(showCropCircle)// 是否圆形裁剪 true or false
.showCropFrame(showCropFrame)// 是否显示裁剪矩形边框 圆形裁剪时建议设为false   true or false
.showCropGrid(showCropGrid)// 是否显示裁剪矩形网格 圆形裁剪时建议设为false    true or false
.openClickSound(false)// 是否开启点击声音 true or false
.cropCompressQuality(90)// 裁剪压缩质量 默认90 int
.minimumCompressSize(100)// 小于100kb的图片不压缩 
.synOrAsy(true)//同步true或异步false 压缩 默认同步
.rotateEnabled(true) // 裁剪是否可旋转图片 true or false
.scaleEnabled(true)// 裁剪是否可放大缩小图片 true or false
.videoQuality(0)// 视频录制质量 0 or 1 int
.videoMaxSecond(15)// 显示多少秒以内的视频or音频也可适用 int 
.videoMinSecond(10)// 显示多少秒以内的视频or音频也可适用 int 
.recordVideoSecond(60)//视频秒数录制 默认60s int
.forResult(PictureConfig.CHOOSE_REQUEST);//结果回调onActivityResult code 

效果如图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jacklin攻城狮

翻译_iOS视图编程指南(View Programming Guide for iOS)之介绍

在iOS中,你可以使用窗口和视图将你应用的内容呈现在屏幕上。窗口本身是不具备呈现可视化内容的功能的,但它可以用作装有应用视图的容器。视图可以规定在窗口的某一部分...

1243
来自专栏人云亦云

网页中内嵌字体

4466
来自专栏软件开发

CSS3与页面布局学习总结(四)——页面布局大全

一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%。当一个元素与另一个元素m...

1.1K6
来自专栏九彩拼盘的叨叨叨

学习纲要:HTML 基础概念

831
来自专栏软件开发

CSS3与页面布局学习总结(五)——Web Font与Sprite

一、web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体。先了解操作系统中的字体: a)、安装好操作系...

3496
来自专栏菜鸟计划

CSS基础语法(一) CSS的3种引入

CSS样式表 CSS可算是网页设计的一个突破,它解决了网页界面排版的难题。可以这么说,HTML的Tag主要是定义网页的内容(Content),而CSS决定这些网...

3725
来自专栏HTML5学堂

Form 表单 问题多多(上)

HTML5学堂 - 刘国利:2013年8月时,曾在给学生讲解WEB前端开发的HTML和CSS基本知识,学生要面对“表单”的制作。我喜欢把“表单”称之为初入前端的...

41110
来自专栏小程序的道路

微信小程序布局

开始我们的入门后,接下来就可以开始创建我们的第一个demo页面了。按照官网的步骤,在pages模块下新建我们自己的模块demo,添加好对应的文件,然后在app....

3856
来自专栏AndroidTv

前端入门1-基础概念声明正文

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

912
来自专栏蔡述雄的专栏

包学会之浅入浅出Vue.js:升学篇

上一篇《包学会之浅入浅出Vue.js:开学篇》中,我们初步了解单页面组件这个概念,现在通过一个项目,来进一步解析组件的应用吧。

33.3K39

扫码关注云+社区

领取腾讯云代金券