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

Posted 2023-02-25

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

【英文标题】：Getting "Illegal callback invocation from native module. This callback type only permits a single invocation from native code"

【发布时间】：2019-08-20 12:30:33

【问题描述】：

我在两个类中使用 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)
              );

【参考方案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)
  

【讨论】：

我使用的是 ios，并且我在我的 Info.plist 文件中允许了相机的权限。

【参考方案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);
);

【讨论】：

但是我的代码对我有用，我可以裁剪图像。那里我收到了回调错误，需要单击两次选择才能看到裁剪的图像。我的意图不需要一次裁剪多个图像。我只需要裁剪一张图片。

@sejn 我并不是说您的代码不起作用。如果您想剪切图像，可以使用我的答案中的代码。

可以看到If you want to cut an one image

@sejn 您是否安装了“react-native-image-crop-picker”？看我的回答。

是的，我正在使用“react-native-image-crop-picker”。