javascript - 如何在 react-native 中访问相机我无法将图片保存在手机存储中
问题描述
这是我的 AndroidMainfest.xml
enter code here
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
and here is my code
import React, { Component, useRef, PermissionsAndroid } from 'react';
import { View, StatusBar, TouchableOpacity, Image } from 'react-native';
import {RNCamera as Camera} from 'react-native-camera';
import styles from '../src/components/styles';
import PhotoCaptureIcon from '../assets/camera.png';
import CameraRoll from "@react-native-community/cameraroll";
const checkAndroidPermission = async () => {
try {
const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;
await PermissionsAndroid.request(permission);
Promise.resolve();
}catch (error) {
Promise.reject(error);
}
};
export default class Application extends Component {
constructor(props) {
super();
this.camera = null;
}
takePicture =async () => {
if (Platform.OS === 'android'){
await checkAndroidPermission();
}
if (this.camera) {
const options = { quality: 0.5, base64: true };
const data = await this.camera.takePictureAsync(options);
console.log(data.uri);
if (data) {
const result = await CameraRoll.save(data.uri);
console.log('result', result);
}
}
}
render() {
return (
<View style={styles.container}>
<StatusBar animated hidden />
<Camera
ref={ref => {
this.camera = ref;
}}
style={styles.preview}
type={Camera.Constants.Type.back}
flashMode={Camera.Constants.FlashMode.off}
captureAudio={false}
/>
<View style={[styles.overlay, styles.bottomOverlay]}>
<TouchableOpacity style={styles.captureButton} onPress={this.takePicture}>
<Image source={PhotoCaptureIcon} />
</TouchableOpacity>
</View>
</View>
);
}
}
和错误可能未处理的承诺拒绝(id:5):错误:权限被拒绝 promiseMethodWrapper@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2242:45 _callee$@http://localhost: 8081/index.bundle?platform=android&dev=true&minify=false:130062:75 tryCatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:24919:23 invoke@http://localhost: 8081/index.bundle?platform=android&dev=true&minify=false:25092:32 tryCatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:24919:23 invoke@http://localhost: 8081/index.bundle?platform=android&dev=true&minify=false:24992:30 http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25002:21 tryCallOne@http://localhost:8081/ index.bundle?platform=android&dev=true&minify=false:26991:16 http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:27092:27 _callTimer@http://localhost:8081/index.bundle?platform=android&dev=true&minify= false:30531:17 _callImmediatesPass@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:30570:17 callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=假:30787:33 __callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2736:35 http://localhost:8081/index.bundle?platform=android&dev=true&minify=false: 2522:34 __guard@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2719:15 flushedQueue@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false: 2521:21 flushedQueue@[本机代码] invokeCallbackAndReturnFlushedQueue@[本机代码]
解决方案
您可以使用react-native-image-picker
来自 npm 的模块。并按照说明 -
在 npm 上,您可以找到该模块。
推荐阅读
- php - preg_match 返回正则表达式匹配的内容,而不是 true 或 false 值
- assembly - 如何加快这种插入排序?(C 中的内联汇编)
- javascript - 在 Angular 6 中初始化 npm Highcharts 7 热图
- ibm-midrange - 使用 SQL,是否可以创建与它所基于的原始文件(PF)具有相同格式级别标识符的全局临时表?
- ios - 停止时如何使滑块处于当前位置
- python - 用叠加的 PDF 绘制直方图
- r - 使用列表创建多个列
- shell - 设置环境变量然后在 Jenkins Scripted Pipeline 中运行脚本
- c++ - 将一个函数传递给 C++ 中的另一个函数,其中参数的数量可以不同
- sass - Sass Mixin 返回什么?