正在获取“来自本机模块的非法回调调用。此回调类型仅允许来自本机代码的单个调用”

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

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

在此之前，请获得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);
});

Answer 2

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