获取“来自本机模块的非法回调调用。此回调类型仅允许从本机代码进行一次调用”

Question

我在两个类中使用 react-native-image 选择器和 react-native-image-crop 选择器库。

一个正在启动库图像（react-native-image picker），另一个包打开裁剪窗口（react-native-image-crop-picker）。

这里启动库在一个屏幕中，并且在从另一个屏幕上的库导航时正在打开裁剪器。

我的问题是点击选择裁剪窗口后，它再次重置裁剪窗口，需要再次裁剪，然后出现非法调用错误。

参考代码片段

 // Opens the library image in Library.js screen
import ImagePicker from 'react-native-image-picker';
     ImagePicker.launchImageLibrary(options, (response)  => {
            if (response.didCancel) {
              console.warn('User cancelled photo picker');
            }
            else if (response.error) {
              console.warn('ImagePicker Error: ', response.error);
            }
            else {
             this.props.navigation.navigate('CropWindow', { screenName: 'CropImage',uri: response.uri});
            }

下面是 CropWindow.js 中的裁剪窗口

import ImagePicker from 'react-native-image-crop-picker';
    ImagePicker.openCropper({
                path: response,
                width: deviceWidth,
                height: deviceWidth*5/4
             }).then(image => {
                this.props.navigation.navigate('ShowAllCroppedImage', {uri: response.uri, croppedImage: this.croppedImage.bind(this)});
              })
              .catch((err) => {
                console.log("openCropper error = " + err)
              });

Answer 1

Android 权限问题

import { PermissionsAndroid } from 'react-native';

async requestCameraPermission() {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        'title': 'Cool Photo App Camera Permission',
        'message': 'Cool Photo App needs access to your camera ' +
                   'so you can take awesome pictures.'
      }
    )
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log("You can use the camera")
    } else {
      console.log("Camera permission denied")
    }
  } catch (err) {
    console.warn(err)
  }
}

Answer 2

您不需要同时使用两个模块。你可以通过简单的执行得到你想要的。

在此之前，获得camera 和storage space 的权限。

你可以使用yarn add react-native-permissions @react-native-community/async-storage

和react-native link react-native-permissions

示例

import Permissions from 'react-native-permissions';
...
_requestPermission = () => {
    Permissions.request('photo').then(response => {
      // Returns once the user has chosen to 'allow' or to 'not allow' access
      // Response is one of: 'authorized', 'denied', 'restricted', or 'undetermined'
      this.setState({photoPermission: response});
    });
    Permissions.request('camera').then(response => {
      // Returns once the user has chosen to 'allow' or to 'not allow' access
      // Response is one of: 'authorized', 'denied', 'restricted', or 'undetermined'
      this.setState({photoPermission: response});
    });
  };

如果你想剪一张图片

import ImagePicker from 'react-native-image-crop-picker';
...
ImagePicker.openPicker({
  width: deviceWidth,
  height: deviceWidth*5/4
  cropping: true
}).then(image => {
  console.log(image);
});

如果要剪切多张图片：

import ImagePicker from 'react-native-image-crop-picker';
...
ImagePicker.openPicker({
  multiple: true,
  width: deviceWidth,
  height: deviceWidth*5/4
  cropping: true
}).then(images => {
  console.log(images);
});