3

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

在此处输入图像描述

4

2 回答 2

0

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

camera在此之前，获得and的权利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);
});
于 2019-08-20T13:01:56.317 回答
0

它的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)
  }
}
于 2019-08-20T13:09:01.427 回答