TypeError:null不是对象(评估'_reactNativeImageCropPicker.default.openPicker')

时间:2020-11-09 09:21:30

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

我在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"
}

0 个答案:

没有答案