如何在反应本机博览会应用程序(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 会显示此消息。安卓版。

我尝试在设置中将所有权限授予 expo 应用程序,但仍然出现相同的消息。 我该如何解决这个问题。

【问题讨论】:

【参考方案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-cameramodule 访问设备摄像头。

我策划了一个小应用程序的工作示例,您可以使用它访问图库和设备相机中的图片。

工作应用: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)中授予相机权限的主要内容,如果未能解决你的问题,请参考以下文章

反应原生博览会。 Android暗模式问题

在博览会上发布反应本机应用程序时出现意外代码 404

Windows 错误:spawnSync ./gradlew 在模拟器上运行反应本机项目时出现 EACCES 错误

触摸在本机反应中无法在博览会网络中工作

在本机反应中将图像转换为base64

反应本机博览会弹出后的问题:“RCTAsyncLocalStorage”没有可见的@interface声明选择器“initWithStorageDirectory:”