当我点击按钮时,react-native-image-crop-picker出现错误“ null不是对象”

大家好,我在使用它时正在学习使用react-native-image-crop-picker上传REact-NATIVE文件的操作

我的代码:

pickSingleWithCamera(cropping,mediaType = 'photo') {
    ImagePicker.openCamera({
      cropping: cropping,width: 500,height: 500,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 },images: null
      });
    }).catch(e => alert(e));
  }


<TouchableOpacity onPress={() => this.pickSingleWithCamera(false)} style={styles.button}>
                <Text style={styles.text}>Select Single Image With Camera</Text>
              </TouchableOpacity>

我也尝试过bind(this),那么我没有收到错误,但相机没有响应

<TouchableOpacity onPress={() => this.pickSingleWithCamera.bind(this)} style={styles.button}>
                <Text style={styles.text}>Select Single Image With Camera</Text>
              </TouchableOpacity>

这是我的总代码


export default class AddPostScreen extends React.Component {

  pickSingleWithCamera(cropping,images: null
      });
    }).catch(e => alert(e));
  }

  pickSingleBase64(cropit) {
    ImagePicker.openPicker({
      width: 300,height: 300,cropping: cropit,includeBase64: true,}).then(image => {
      console.log('received base64 image');
      this.setState({
        image: { uri: `data:${image.mime};base64,` + image.data,height: image.height },images: null
      });
    }).catch(e => alert(e));
  }

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

  cleanupSingleImage() {
    let image = this.state.image || (this.state.images && this.state.images.length ? this.state.images[0] : null);
    console.log('will cleanup image',image);

    ImagePicker.cleanSingle(image ? image.uri : null).then(() => {
      console.log(`removed tmp image ${image.uri} from tmp directory`);
    }).catch(e => {
      alert(e);
    })
  }

  cropLast() {
    if (!this.state.image) {
      return Alert.alert('No image','Before open cropping only,please select image');
    }

    ImagePicker.openCropper({
      path: this.state.image.uri,width: 200,height: 200
    }).then(image => {
      console.log('received cropped image',images: null
      });
    }).catch(e => {
      console.log(e);
      Alert.alert(e.message ? e.message : e);
    });
  }

  pickSingle(cropit,circular = false,mediaType) {
    ImagePicker.openPicker({
      width: 500,cropperCircleoverlay: circular,compressImageMaxWidth: 1000,compressImageMaxHeight: 1000,compressImageQuality: 1,compressVideoPreset: 'MediumQuality',images: null
      });
    }).catch(e => {
      console.log(e);
      Alert.alert(e.message ? e.message : e);
    });
  }

  pickMultiple() {
    ImagePicker.openPicker({
      multiple: true,waitAnimationEnd: false,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;
  }

  renderVideo(video) {
    console.log('rendering video');
    return (<View style={{ height: 300,width: 300 }}>
      <Video source={{ uri: video.uri,type: video.mime }}
        style={{
          position: 'absolute',top: 0,left: 0,bottom: 0,right: 0
        }}
        rate={1}
        paused={false}
        volume={1}
        muted={false}
        resizeMode={'cover'}
        onError={e => console.log(e)}
        onLoad={load => console.log(load)}
        repeat={true} />
    </View>);
  }

  renderImage(image) {
    return <Image style={{ width: 300,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(
<View>

<TouchableOpacity onPress={() => this.pickSingleWithCamera.bind(this)} style={styles.button}>
                <Text style={styles.text}>Select Single Image With Camera</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => this.pickSingleWithCamera(false,mediaType = 'video')} style={styles.button}>
                <Text style={styles.text}>Select Single Video With Camera</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => this.pickSingleWithCamera.bind(this)} style={styles.button}>
                <Text style={styles.text}>Select Single With Camera With Cropping</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => this.pickSingle(false)} style={styles.button}>
                <Text style={styles.text}>Select Single</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => this.cropLast()} style={styles.button}>
                <Text style={styles.text}>Crop Last Selected Image</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => this.pickSingleBase64(false)} style={styles.button}>
                <Text style={styles.text}>Select Single Returning Base64</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => this.pickSingle(true)} style={styles.button}>
                <Text style={styles.text}>Select Single With Cropping</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => this.pickSingle(true,true)} style={styles.button}>
                <Text style={styles.text}>Select Single With Circular Cropping</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.pickMultiple.bind(this)} style={styles.button}>
                <Text style={styles.text}>Select Multiple</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.cleanupImages.bind(this)} style={styles.button}>
                <Text style={styles.text}>Cleanup All Images</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.cleanupSingleImage.bind(this)} style={styles.button}>
                <Text style={styles.text}>Cleanup Single Image</Text>
              </TouchableOpacity>

            </View>

)
}

我正在使用此示例中的代码 https://github.com/ivpusic/react-native-image-crop-picker/blob/master/example/app.js

所以请告诉我是否有人知道解决方案。


lisa7262 回答:当我点击按钮时,react-native-image-crop-picker出现错误“ null不是对象”

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3162232.html

大家都在问