[Unhandled promise rejection: TypeError: null is not an object (evaluating '_reactNativeImageCropPic

Posted 2023-02-16

【中文标题】[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')][Unhandled promise rejection: TypeError: null is not an object (evaluating '_reactNativeImageCropPicker.default.openPicker')]

【发布时间】：2020-04-05 11:38:47

【问题描述】：

我正在通过展会运行我的 react-native 应用程序。 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。

链接到 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$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】：

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

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

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