[英]How to grant camera permission in react native expo app (android)
我的代碼是:
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
此消息就會顯示出來。 對於 android。
使用expo-camera
模塊訪問設備攝像頭。
我策划了一個小型應用程序的工作示例,您可以使用它從圖庫和設備相機中訪問圖片。
工作應用程序: Expo 小吃
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',
},
});
它在文檔配置中提到。
在托管應用中,Camera 需要Permissions.CAMERA
。 視頻錄制需要Permissions.AUDIO_RECORDING
。
我有同樣的問題......我正在使用 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(); }, []);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.