如何在React Native Expo应用程序（Android）中授予相机权限

Question

我的代码是：

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>;
}

当我第一次被提示时，我拒绝了相机的权限。 现在每次我打开应用程序时，都会显示“需要访问图库才能使此应用程序工作”的消息。适用于Android。

• 我已经在设置中为Expo应用程序提供了所有权限，但仍然出现相同的消息。 我该如何解决这个问题。

- chaitanya

Answer 1

使用expo-camera模块可以访问设备相机。

我已经为您精选了一个工作示例小应用程序，您可以从图库中访问图片，也可以使用设备相机。

工作应用程序：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',
  },
});

- Ketan Ramteke

Answer 2

我有同样的问题...我正在使用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();
  }, []);

- Lorezz

Answer 3

如果用户第一次拒绝了相机权限，第二次使用requestCameraPermissionsAsync()请求权限时，除非用户在应用程序设置中手动更改权限，否则答案将始终为“已拒绝”。

import { Linking } from "react-native";
import { useCameraPermissions } from "expo-image-picker";

export default function App() {

    const [status, requestPermissions] = useCameraPermissions();

    const requestPermissionAgain = () => {
        Linking.openSettings();
    }

    useEffect(() => {
        if (!status?.granted) requestPermissions();
    }, []);
}

- Mar Scheber

Answer 4

在doc配置中提到了。

在托管应用程序中，相机需要Permissions.CAMERA。视频录制需要Permissions.AUDIO_RECORDING。

- Nitish

---

那已经过时了。请参阅：https://blog.expo.io/expo-sdk-41-12cc5232f2ef - undefined