TypeError：null不是对象评估'_reactNativeImageCropPicker.default.openPicker'

问题描述

我在React Native中使用https://github.com/ivpusic/react-native-image-crop-picker软件包。我想一次从图库上传多个图像。我一步一步安装了软件包。但是，我遇到了同样的错误。

该平台是博览会上的Android。

import React,{Component} from 'react';
import { View,Text,StyleSheet,ScrollView,Alert,Image,TouchableOpacity,NativeModules,Dimensions,StatusBar,SafeAreaView } from 'react-native';
import {CarColors} from "../assets/Colors";
import ImagePicker from 'react-native-image-crop-picker'

var commonStyles = require('../assets/style');
//var ImagePicker = NativeModules.ImageCropPicker;


export default class NewItem extends Component {

    constructor() {
        super();
        this.state = {
            image: null,images: null
        };
    }

    cleanupImages() {
        ImagePicker.clean().then(() => {
            // console.log('removed tmp images from tmp directory');
            alert('Temporary images history cleared')
        }).catch(e => {
            alert(e);
        });
    }

    pickMultiple() {
        ImagePicker.openPicker({
            multiple: true,waitAnimationEnd: false,includeExif: true,forceJpg: true,}).then(images => {
            this.setState({
                image: null,images: images.map(i => {
                    console.log('received image',i);
                    return {uri: i.path,width: i.width,height: i.height,mime: i.mime};
                })
            });
        }).catch(e => alert(e));
    }

    scaledHeight(oldW,oldH,newW) {
        return (oldH / oldW) * newW;
    }

    renderImage(image) {
        return <Image style={{width: 200,height: 200,resizeMode: 'contain'}} source={image}/>
    }

    renderAsset(image) {
        if (image.mime && image.mime.toLowerCase().indexOf('video/') !== -1) {
            return this.renderVideo(image);
        }

        return this.renderImage(image);
    }

    render() {
        return (
            <SafeAreaView style={styles.safeArea}>

                <View style={styles.container}>
                    <StatusBar
                        backgroundColor={"#FFFFFF"}
                        barStyle="light-content"/>
                    <TouchableOpacity onPress={this.pickMultiple.bind(this)} >
                        <Text >Select Images</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={this.cleanupImages.bind(this)} >
                        <Text >Clean History</Text>
                    </TouchableOpacity>
                </View>

                <ScrollView style={styles.imgContainer}>
                    {this.state.image ? this.renderAsset(this.state.image) : null}
                    {this.state.images ? this.state.images.map(i => <View style={styles.imgView}
                                                                          key={i.uri}>{this.renderAsset(i)}</View>) : null}
                    {
                        this.state.images &&
                        <TouchableOpacity onPress={this.cleanupImages.bind(this)} >
                            <Text >Upload</Text>
                        </TouchableOpacity>
                    }
                </ScrollView>


            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: "#FFFFFF",},imgContainer: {
        marginVertical: 20
    },button: {
        backgroundColor: 'blue',marginBottom: 10,text: {
        color: 'white',fontSize: 20,textAlign: 'center'
    },title: {
        fontWeight: 'bold',fontSize: 22
    },safeArea: {
        marginTop: 20
    },dateContainer: {
        flexDirection: 'row',imgView: {
        width: '50%',marginVertical: 10,}
});

我的Package.json文件具有所需的所有依赖关系

{
  "scripts": {
    "start": "react-native start","android": "react-native run-android","ios": "react-native run-ios","web": "expo start --web","eject": "expo eject"
  },"dependencies": {
    "@react-native-community/masked-view": "0.1.10","@react-native-community/netinfo": "^5.9.7","@react-navigation/bottom-tabs": "^5.10.6","@react-navigation/drawer": "^5.10.2","@react-navigation/native": "^5.8.2","@react-navigation/stack": "^5.11.1","aws-amplify": "^3.3.4","aws-amplify-react-native": "^4.2.7","expo": "~39.0.2","expo-constants": "^9.2.0","expo-image-manipulator": "^8.3.0","expo-image-picker": "^9.1.1","expo-image-picker-multiple": "^1.2.4","expo-multiple-media-imagepicker": "^1.2.1","expo-splash-screen": "~0.6.2","expo-status-bar": "~1.0.2","expo-updates": "~0.3.2","native-base": "^2.13.14","react": "16.13.1","react-dom": "16.13.1","react-native": "~0.63.3","react-native-customized-image-picker": "^0.2.1","react-native-gesture-handler": "~1.7.0","react-native-image-crop-picker": "^0.35.1","react-native-image-picker": "^2.3.4","react-native-ionicons": "^4.6.5","react-native-reanimated": "~1.13.0","react-native-safe-area-context": "3.1.4","react-native-screens": "~2.10.1","react-native-snap-carousel": "^3.9.1","react-native-svg": "^12.1.0","react-native-unimodules": "~0.11.0","react-native-web": "~0.13.12"
  },"devDependencies": {
    "@babel/core": "~7.9.0","babel-jest": "~25.2.6","jest": "~25.2.6","react-test-renderer": "~16.13.1"
  },"private": true,"name": "mish-app","version": "1.0.0"
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）