React-native-image-picker 使用体验

这篇博客分享了使用React-native-image-picker在Android 11上遇到的摄像头权限问题。由于Android 11的隐私保护变化,导致无法开启摄像头。解决方法涉及在运行时申请权限,并引用了官方issue和建议更新库版本。

React-native-image-picker 使用体验

基本的安装教程这里不在赘述,百度有很多,主要说一下遇到的问题
在 android 11 的表现:
无法开摄像头,触发事件没反应,有报错
问题原因:
Android 11 引入了一些变更和限制来加强用户隐私保护,需要在launchCamera 之前进行权限申请。
处理问题:

import {
   
    PermissionsAndroid } from "react-native";
import {
   
    CameraOptions, launchCamera } from "react-native-image-picker";
react-native-image-crop-picker 是一个用于 React Native 的开源项目,主要用于在 iOS 和 Android 平台上实现图片和视频的选择、裁剪和压缩功能,其主要编程语言为 JavaScript,适用于 React Native 开发环境 [^1]。 ### 功能介绍 该项目支持从相机和相册中选择图片和视频,并且可以配置压缩选项和多选功能。在实际开发中,可用于满足用户更换头像等需求,能够实现本地相册和照相机来采集图片,还提供了多选、图片裁剪等功能 [^1][^3]。 ### 使用指南 #### 选择一张图片并裁剪 ```javascript import React from "react"; import { View, Text, PermissionsAndroid, Button } from 'react-native'; import ImagePicker from 'react-native-image-crop-picker'; class CropPicker extends React.Component { constructor(props) { super(props); this.state = { } } render() { return ( <View> <Text style={{ padding: 20, backgroundColor: 'pink' }} onPress={this.selectImage}>点击按钮进入相册</Text> </View> ); } selectImage = () => { ImagePicker.openPicker({ width: 300, height: 400, cropping: true, }).then(image => { console.log(image); }).catch(err => { console.log("没有选择照片"); }) } } export default CropPicker; ``` #### iOS 配置 在 Xcode 中打开项目名.xcworkspace,然后打开 Info.plist,并添加带有值的字符串 NSPhotoLibraryUsageDescription,描述为什么需要访问用户照片以及 NSCameraUsageDescription / NSMicrophoneUsageDescription [^5]。 ### 问题解决方案 #### 版本兼容性问题 运行项目时,检查 `/android/build.gradle` 文件,查看 gradle 版本。如果运行报错 “Unexpected element <queries> found in <manifest>”,则需要升级 gradle,示例如下: ```groovy dependencies { // 3.5.3 是不行的,可以一直升级到 4.2.2 ,之后用 Android studio 重新下载 gradle 依赖 classpath("com.android.tools.build:gradle:4.2.2") } ``` #### 华为手机拍照功能异常问题 在 React - Native使用该库时,在华为手机上可能不能正常使用拍照功能。示例代码如下: ```javascript import ImagePicker from 'react-native-image-crop-picker'; ImagePicker.openCamera(photoOptions) .then(image => { callback(image); }) ``` 需要针对华为手机的特性进一步排查问题。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值