TypeError: Null не является объектом - ImagePicker - React Native - PullRequest
Новая
       10

TypeError: Null не является объектом - ImagePicker - React Native

0 голосов
/ 15 марта 2020

Я разрабатываю приложение React-Native, которое в основном имеет две кнопки. Одна кнопка активирует камеру, но по какой-то причине я получаю следующую ошибку: Сообщение об ошибке

Это код в приложении. js

/**
 * execute npm install react-native-image-crop-picker --save in terminal
 */

import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Alert,
  Image,
  NativeModules,
  Button,
} from 'react-native';

let ImagePicker = NativeModules.ImageCropPicker;

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: 'blue',
    marginBottom: 10,
  },
  text: {
    color: 'white',
    fontSize: 20,
    textAlign: 'center',
  },
  buttonAlignment: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 10,
  },
});

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      image: null,
    };
  }

  pickSingleWithCamera(cropping, mediaType = 'photo') {
    ImagePicker.openCamera({
      cropping: cropping,
      includeExif: true,
      mediaType,
    })
      .then(image => {
        console.log('received image', image);
        this.setState({
          image: {
            uri: image.path,
            width: image.width,
            height: image.height,
            mime: image.mime,
          },
        });
      })
      .catch(
        e =>
          Alert.alert('Camera Error', 'Error: "No Image Selected"', [
            {text: 'OK', onPress: () => console.log('OK pressed')},
          ]),
        {cancelable: false},
      );
  }

  renderImage(image) {
    if (
      this.state.image.uri ===
      'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
    ) {
      return (
        <Image
          style={{
            width: image.width,
            height: image.height,
            resizeMode: 'contain',
          }}
          source={image}
        />
      );
    } else {
      return (
        <Image
          style={{
            width: 400,
            height: 300,
            resizeMode: 'contain',
          }}
          source={image}
        />
      );
    }
  }

  defaultImage() {
    return (
      <Image
        source={{
          uri:
            'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',
        }}
      />
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={{textAlign: 'center', fontSize: 20, paddingBottom: 10}}>
          Picture Application!
        </Text>
        <View>
          {this.state.image
            ? this.renderImage(this.state.image)
            : this.defaultImage()}
        </View>
        <View style={styles.buttonAlignment}>
          <Button
            title={'Take Picture'}
            onPress={() => this.pickSingleWithCamera(true)}
            color={'#2df33f'}
          />
          <Button
            title={'Reset Picture'}
            onPress={() =>
              this.setState({
                image: {
                  uri:
                    'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',
                },
              })
            }
          />
        </View>
      </View>
    );
  }
}

Мне пришлось использовать фрагмент, потому что код выглядел полностью неработающим при попытке просто вставить его нормально. Извините за это.

Я действительно сбит с толку, потому что в коде все в порядке.

Спасибо!

Дополнительные сведения: Я создал проект с помощью response- родной CLI (НЕ Экспо)

...