react-native-image-picker 在 android 10 中不工作

Question

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

我把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"/>

一些android信息

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

那么有人对此有解决方案吗？

Answer 1

在 AndroidMenifest.xml 文件中添加 android:requestLegacyExternalStorage="true" 对 Android 10 有效。将其添加为应用程序标签的属性。

使用目标版本 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
        });
      }
    });

  }

react-native-image-picker 在 android 10 中不工作

react-native-image-picker not working in android 10

react-native

react-native-image-picker