[Unhandled promise rejection: TypeError: null is not an object (evaluating '_reactNativeImageCropPicker.default.openPicker')]

Question

我是运行我的反应本机应用程序通过世博会。 react-native-image-picker 也发生了同样的事情。

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

Link 到 npm 库：-

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

图像裁剪选择器 -> 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
- 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

Answer 1

问题是你用过expo。并且 expo 不支持链接任何外部库。所以如果你想使用那些特定的库，那么你必须从 expo 中退出到裸反应原生。您可以查看此文档了解如何弹出，medium link

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

希望对您有所帮助。有疑问请随意。

[Unhandled promise rejection: TypeError: null is not an object (evaluating '_reactNativeImageCropPicker.default.openPicker')]

[Unhandled promise rejection: TypeError: null is not an object (evaluating '_reactNativeImageCropPicker.default.openPicker')]

javascript

react-native

react-native-image-picker