如何在反应本机博览会应用程序(android)中授予相机权限
Posted
技术标签:
【中文标题】如何在反应本机博览会应用程序(android)中授予相机权限【英文标题】:How to grant camera permission in react native expo app (android) 【发布时间】:2021-05-02 00:02:27 【问题描述】:我的代码是:
import React, useEffect from "react";
import * as ImagePicker from "expo-image-picker";
import Screen from "./app/components/Screen";
export default function App()
async function permisionFunction()
const result = await ImagePicker.getCameraPermissionsAsync();
if (!result.granted)
console.log(result);
alert("need access to gallery for this app to work");
useEffect(() =>
permisionFunction();
, []);
return <Screen></Screen>;
第一次提示时我拒绝了相机的权限。
现在,每当我打开应用程序时,总是need access to gallery for this app to work
会显示此消息。安卓版。
【问题讨论】:
【参考方案1】:我有同样的问题...我正在使用 expo SDK 42,并且在拒绝回答后权限请求不再触发。
无论如何,你的代码有一些错误,你必须注意权限响应的状态属性。
这是检查响应状态的方法
const requestPermissions = async () =>
try
const
status,
= await ImagePicker.requestMediaLibraryPermissionsAsync();
console.log('status lib', status);
setHasPickerPermission(status === 'granted');
catch (error)
console.log('error', error);
try
const status = await ImagePicker.requestCameraPermissionsAsync();
console.log('status camera', status);
setHasCameraPermission(status === 'granted');
catch (error)
console.log('error', error);
;
useEffect(() =>
requestPermissions();
, []);
【讨论】:
【参考方案2】:使用expo-camera
module 访问设备摄像头。
我策划了一个小应用程序的工作示例,您可以使用它访问图库和设备相机中的图片。
工作应用:Expo Snack
import React, useState, useEffect from 'react';
import StyleSheet, Text, View, Button, Image from 'react-native';
import Camera from 'expo-camera';
import * as ImagePicker from 'expo-image-picker';
export default function Add( navigation )
const [cameraPermission, setCameraPermission] = useState(null);
const [galleryPermission, setGalleryPermission] = useState(null);
const [camera, setCamera] = useState(null);
const [imageUri, setImageUri] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);
const permisionFunction = async () =>
// here is how you can get the camera permission
const cameraPermission = await Camera.requestPermissionsAsync();
setCameraPermission(cameraPermission.status === 'granted');
const imagePermission = await ImagePicker.getMediaLibraryPermissionsAsync();
console.log(imagePermission.status);
setGalleryPermission(imagePermission.status === 'granted');
if (
imagePermission.status !== 'granted' &&
cameraPermission.status !== 'granted'
)
alert('Permission for media access needed.');
;
useEffect(() =>
permisionFunction();
, []);
const takePicture = async () =>
if (camera)
const data = await camera.takePictureAsync(null);
console.log(data.uri);
setImageUri(data.uri);
;
const pickImage = async () =>
let result = await ImagePicker.launchImageLibraryAsync(
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 1,
);
console.log(result);
if (!result.cancelled)
setImageUri(result.uri);
;
return (
<View style=styles.container>
<View style=styles.cameraContainer>
<Camera
ref=(ref) => setCamera(ref)
style=styles.fixedRatio
type=type
ratio='1:1'
/>
</View>
<Button title='Take Picture' onPress=takePicture />
<Button title='Gallery' onPress=pickImage />
imageUri && <Image source= uri: imageUri style= flex: 1 />
</View>
);
const styles = StyleSheet.create(
container:
flex: 1,
,
cameraContainer:
flex: 1,
flexDirection: 'row',
,
fixedRatio:
flex: 1,
aspectRatio: 1,
,
button:
flex: 0.1,
padding: 10,
alignSelf: 'flex-end',
alignItems: 'center',
,
);
【讨论】:
【参考方案3】:doc 配置中有提及。
在托管应用中,相机需要Permissions.CAMERA
。视频录制需要Permissions.AUDIO_RECORDING
。
【讨论】:
现在已弃用。见:blog.expo.io/expo-sdk-41-12cc5232f2ef以上是关于如何在反应本机博览会应用程序(android)中授予相机权限的主要内容,如果未能解决你的问题,请参考以下文章
Windows 错误:spawnSync ./gradlew 在模拟器上运行反应本机项目时出现 EACCES 错误
反应本机博览会弹出后的问题:“RCTAsyncLocalStorage”没有可见的@interface声明选择器“initWithStorageDirectory:”