react-native-image-picker 在 android 10 中不起作用

Question

我正在处理一个项目，我需要使用相机或从库中选择图像，因此使用了 react 本机图像选择器，它在开发模式下工作正常，在生产中它在 Android 10 中不起作用，只是我尝试了很多来自 github 的解决方案，例如权限 我在清单中添加了 android:requestLegacyExternalStorage="true" 但它导致我和错误 android:requestLegacyExternalStorage 在我想在开发和生产中构建时找不到

我将 sdk 目标更新为 29 相同的问题

我的图片选择器代码

const options = {
  cancelButtonTitle: strings.cancel,
  takePhotoButtonTitle: strings.takePicture,
  chooseFromLibraryButtonTitle: strings.chooseFromLibrary,
  title: strings.selectPhoto,
  quality: 0.1,
  noData: true,
  storageOptions: {
    skipBackup: true,
    path: 'images',
    cameraRoll: true,
    waitUntilSaved: true,
  },
};

const pickImage = () => {
  const promise = new Promise(async (resolve, reject) => {
    if (Platform.OS === 'android') {
      try {
        await PermissionsAndroid.requestMultiple([
          PermissionsAndroid.PERMISSIONS.CAMERA,
          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
        ]);

        const permissionCamera = await PermissionsAndroid.check(
          'android.permission.CAMERA',
        );
        const permissionWriteStorage = await PermissionsAndroid.check(
          'android.permission.WRITE_EXTERNAL_STORAGE',
        );

        if (!permissionCamera || !permissionWriteStorage) {
          console.log('Failed to get the required permissions.');
        }

        const source = await openPicker();

        resolve(source);
      } catch (error) {
        reject(error);
        console.log('Failed to get the required permissions.');
      }
    } else {
      try {
        const source = await openPicker();
        resolve(source);
      } catch (error) {
        reject(error);
        console.log('Failed to get the required permissions.');
      }
    }
  });
  return promise;
};

const openPicker = () => {
  const promise = new Promise((resolve, reject) => {
    ImagePicker.showImagePicker(options, response => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
        reject(response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const source = {
          uri: response.path ? `file://${response.path}` : response.uri,
          name: response.fileName ? response.fileName : 'picture_0.jpg',
          filename: response.fileName ? response.fileName : 'picture_0.jpg',
          type: response.type,
        };

        resolve(source);
      }
    });
  });

  return promise;
};

const openCamera = () => {
  const promise = new Promise((resolve, reject) => {
    ImagePicker.launchCamera(options, response => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
        reject(response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const source = {
          uri: response.path ? `file://${response.path}` : response.uri,
          name: response.fileName ? response.fileName : 'picture_0.jpg',
          filename: response.fileName ? response.fileName : 'picture_0.jpg',
          type: response.type,
        };

        resolve(source);
      }
    });
  });

  return promise;
};

const openGallery = () => {
  const promise = new Promise((resolve, reject) => {
    ImagePicker.launchImageLibrary(options, response => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
        reject(response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const source = {
          uri: response.path ? `file://${response.path}` : response.uri,
          name: response.fileName ? response.fileName : 'picture_0.jpg',
          filename: response.fileName ? response.fileName : 'picture_0.jpg',
          type: response.type,
        };

        resolve(source);
      }
    });
  });

  return promise;
};

export {pickImage, openCamera, openGallery};

我的清单权限

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

一些安卓信息

 buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 29

那么有人有解决方案吗？

Answer 1

在 AndroidMenifest.xml 文件中添加 android:requestLegacyExternalStorage="true" 适用于 Android 10。将其添加为 Application 标签的属性。

使用目标版本为 29。这里是关于 build.gradle 文件的一些信息。

  buildToolsVersion = "29.0.2"
  minSdkVersion = 16
  compileSdkVersion = 29
  targetSdkVersion = 29
  supportLibVersion = "29.0.0"

但是，此解决方案不适用于 Android 11。目前是最新版本。

Answer 2

供参考：在 GitHub 上有一个关于此问题的线程，提供更多信息：https://github.com/react-native-image-picker/react-native-image-picker/issues/1393#issuecomment-690312980

另一个建议的解决方案是将您的 targetSDK 降低到版本 28 (android/build.gradle)：

    buildToolsVersion = "28.0.3"
    minSdkVersion = 16
    compileSdkVersion = 28
    targetSdkVersion = 28

另外注意：如果您只使用相机而不是从图库中选择的功能，并且您不希望照片出现在图库中，那么您也可以设置此选项而不更改 SDK 版本或设置任何旧选项：

storageOptions={{ privateDirectory: true  }}

Answer 3

如果图像选择器仍然无法正常工作，那么您可以使用react-native-image-crop-picker。

之后，您必须制作选择图片按钮并选择相机按钮并执行由图像图片代码组成的功能

ImagePicker.openPicker({
    multiple: true,
}).then(images => {})

用于相机

ImagePicker.openCamera({
    width: 300,
    height: 400,
    cropping: false,
}).then(images => {})

其中images是你的图片文件，获取该文件的路径并显示在uri:中

Answer 4

1.首先添加以下行 android\app\src\main\AndroidManifest.xml

 ...
        <usespermission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
        <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
        <uses-permission android:name="android.permission.CAMERA"/>
        
        <application
          ...
          android:requestLegacyExternalStorage="true"
          ...> 

2。请求权限

 { 
   requestCameraPermission = async () => {
        try {
            const granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.CAMERA,
                {
                    title: 'Truventorm Camera Permission',
                    message:
                        'Truventorm needs access to your camera ' +
                        'to set profile picture.',
                    buttonNeutral: 'Ask Me Later',
                    buttonNegative: 'Cancel',
                    buttonPositive: 'OK',
                },
            );
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                console.log('You can use the camera');
                this.chooseFromCamera();
            } else {
                console.log('Camera permission denied');
            }
        } catch (err) {
            console.warn(err);
        }
    }
}

3.现在午餐相机

chooseFromCamera = async() => {
    let options = {
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    };

    launchCamera( options ,(response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
        alert(response.customButton);
      } else {
        const source = { uri: response.uri };
        console.log('response', JSON.stringify(response));
        this.setState({
          filePath: response,
          fileData: response.data,
          fileUri: response.uri
        });
      }
    });

  }