react-native - 我如何克服 "Permission Denial....obtain access using ACTION_OPEN_DOCUMENT or related APIs"？

Question

我正在使用 react-native-firebase和 react-native-document-picker我正在尝试关注 face detection tutorial .

尽管通过 PermissionsAndroid 具有读取访问权限，但当前出现以下错误:

权限拒绝:从 pid=4746 读取 com.android.provides.media.MediaDocumentsProvider uri [uri]，uid=10135 需要您使用 ACTION_OPEN_DOCUMENT 或相关 API 获取访问权限

我可以在屏幕上显示用户选择的图像，但 react-native-firebase 功能似乎无法获得许可。错误发生在这个调用中:const faces = await vision().faceDetectorProcessImage(localPath);。

关于如何授予面部检测功能访问权限或我做错了什么的任何建议？

我的 AndroidManifest.xml 文件包含以下内容:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

以下是该组件中的所有代码以供引用:

import React, {useState} from 'react';
import { Button, Text, Image, PermissionsAndroid } from 'react-native';
import vision, { VisionFaceContourType } from '@react-native-firebase/ml-vision';
import DocumentPicker from 'react-native-document-picker';



async function processFaces(localPath) {

  console.log(localPath)
  const faces = await vision().faceDetectorProcessImage(localPath);
  console.log("Got faces")

  faces.forEach(face => {
    console.log('Head rotation on Y axis: ', face.headEulerAngleY);
    console.log('Head rotation on Z axis: ', face.headEulerAngleZ);

    console.log('Left eye open probability: ', face.leftEyeOpenProbability);
    console.log('Right eye open probability: ', face.rightEyeOpenProbability);
    console.log('Smiling probability: ', face.smilingProbability);

    face.faceContours.forEach(contour => {
      if (contour.type === VisionFaceContourType.FACE) {
        console.log('Face outline points: ', contour.points);
      }
    });
  });
}

async function pickFile () {
    // Pick a single file
    try {
        const res = await DocumentPicker.pick({
            type: [DocumentPicker.types.images],
        });
        console.log(
            res.uri,
            res.type, // mime type
            res.name,
            res.size
        );
        return res
    } catch (err) {
        if (DocumentPicker.isCancel(err)) {
        // User cancelled the picker, exit any dialogs or menus and move on
            console.log("User cancelled")
        } else {
            console.log("Error picking file or processing faces")
            throw err;
        }
    }
}

const requestPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
        {
          title: "Files Permission",
          message:
            "App needs access to your files " +
            "so you can run face detection.",
          buttonNeutral: "Ask Me Later",
          buttonNegative: "Cancel",
          buttonPositive: "OK"
        }
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log("We can now read files");
      } else {
        console.log("File read permission denied");
      }
      return granted
    } catch (err) {
      console.warn(err);
    }
  };

function FaceDetectionScreen ({navigation}) {
    const [image, setImage] = useState("");
    return (
        <>
            <Text>This is the Face detection screen.</Text>
            <Button title="Select Image to detect faces" onPress={async () => {
                const permission = await requestPermission();
                if (permission === PermissionsAndroid.RESULTS.GRANTED) {
                    const pickedImage = await pickFile();
                    const pickedImageUri = pickedImage.uri
                    setImage(pickedImageUri);
                    processFaces(pickedImageUri).then(() => console.log('Finished processing file.'));
                }
                }}/>
            <Image style={{flex: 1}} source={{ uri: image}}/>
        </>
    ); 
}

export default FaceDetectionScreen;

Answer 1

感谢this comment on a github issue我能够更新我的代码并通过将 processFaces 的前三行更新为:

async function processFaces(contentUri) {
  const stat = await RNFetchBlob.fs.stat(contentUri)
  const faces = await vision().faceDetectorProcessImage(stat.path);

导入后 import RNFetchBlob from 'rn-fetch-blob'。

rn-fetch-blob