[未处理的承诺拒绝:TypeError:null不是对象(正在评估'_reactNativeImageCropPicker.default.openPicker')]

时间:2019-12-12 05:55:05

标签: javascript react-native react-native-image-picker

我正在通过博览会运行本机应用程序。 react-native-image-picker发生了同样的事情。

我尝试使用react-native link react-native-image-pickerreact-native link react-native-image-crop-picker。它没有用,所以我尝试取消链接,然后再次链接,但是仍然没有用。我尝试了各种方法,例如还尝试了不同版本的react-native和react-native-image-picker,以及react-native-image-crop-picker。

链接到npm库:-

图像选择器-> https://www.npmjs.com/package/react-native-image-crop-picker/v/0.4.2

image-crop-picker-> https://github.com/react-native-community/react-native-image-picker

react-native-image-picker的代码:-

import ImagePicker from 'react-native-image-picker';

// More info on all the options is below in the API Reference... just some common use cases shown here
const options = {
  title: 'Select Avatar',
  customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

/**
 * The first arg is the options object for customization (it can also be null or omitted for default options),
 * The second arg is the callback which sends object: response (more info in the API Reference)
 */
ImagePicker.showImagePicker(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);
  } else {
    const source = { uri: response.uri };

    // You can also display the image using data:
    // const source = { uri: 'data:image/jpeg;base64,' + response.data };

    this.setState({
      avatarSource: source,
    });
  }
});

react-native-image-crop-picker的代码:-

import React from 'react';
import {
    StyleSheet,
    Text,
    View,
    ScrollView,
    TouchableOpacity,
    Modal,
    TouchableHighlight,
    Alert,
    TextInput,
    Picker,
    Button,
} from 'react-native';

import Textarea from 'react-native-textarea';
import { Card } from 'react-native-shadow-cards';

import ImagePicker from 'react-native-image-crop-picker';

export default class CreateProject extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    handleChoosePhoto = async (imageOpt) => {
        if (imageOpt === 'gallery') {
            ImagePicker.openPicker({
                width: 300,
                height: 400,
                cropping: true
            }).then(image => {
                console.log(image);
            });
        } else if (imageOpt === 'camera') {
            ImagePicker.openCamera({
                width: 300,
                height: 400,
                cropping: true,
              }).then(image => {
                console.log(image);
              });
        } else {
            Alert.alert('Failure! Can\'t do this operation right now.');
        }
    }
    
    render() {
      return (
        // Code for the View here
      );
    }
}

错误代码:-

[Unhandled promise rejection: TypeError: null is not an object (evaluating '_reactNativeImageCropPicker.default.openPicker')]
* app/components/CreateProject.js:29:24 in _callee$
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:271:30 in invoke
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:135:28 in invoke
- node_modules/regenerator-runtime/runtime.js:170:17 in <unknown>
- node_modules/promise/setimmediate/core.js:45:7 in tryCallTwo
- node_modules/promise/setimmediate/core.js:200:23 in doResolve
- node_modules/promise/setimmediate/core.js:66:12 in Promise
- node_modules/regenerator-runtime/runtime.js:169:27 in callInvokeWithMethodAndArg
- node_modules/regenerator-runtime/runtime.js:192:38 in enqueue
- node_modules/regenerator-runtime/runtime.js:216:8 in async
* app/components/CreateProject.js:27:24 in _callee
* app/components/CreateProject.js:70:87 in onPress
- node_modules/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.android.js:213:45 in touchableHandlePress
* [native code]:null in touchableHandlePress
- node_modules/react-native/Libraries/Components/Touchable/Touchable.js:878:34 in _performSideEffectsForTransition
* [native code]:null in _performSideEffectsForTransition
- node_modules/react-native/Libraries/Components/Touchable/Touchable.js:777:44 in _receiveSignal
* [native code]:null in _receiveSignal
- node_modules/react-native/Libraries/Components/Touchable/Touchable.js:488:24 in touchableHandleResponderRelease
* [native code]:null in touchableHandleResponderRelease
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:93:15 in invokeGuardedCallbackImpl
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:318:36 in invokeGuardedCallback
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:342:30 in invokeGuardedCallbackAndCatchFirstError
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:715:42 in executeDispatch
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:737:20 in executeDispatchesInOrder
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:894:29 in executeDispatchesAndRelease
* [native code]:null in forEach
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:874:16 in forEachAccumulated
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:1050:21 in runEventsInBatch
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:1072:19 in runExtractedEventsInBatch
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2708:6 in <unknown>
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18527:14 in batchedUpdates$1
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2611:31 in batchedUpdates
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2706:17 in _receiveRootNodeIDEvent
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2782:28 in receiveTouches
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:366:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:106:26 in <unknown>
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:314:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:105:17 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

1 个答案:

答案 0 :(得分:0)

问题是您使用过博览会。而且expo不支持任何外部库的链接。因此,如果要使用这些特定的库,则必须从expo弹出,以完全不响应本机。您可以查看如何弹出文档,medium link

否则,您可以使用博览会图像选择器expo-image picker并尝试使用它。

希望有帮助。毫无疑问。