Javascript react本机图像裁剪选择器获取错误“；null不是一个对象"；当我点击按钮

大家好，我正在学习使用REACT-NATIVE image crop picker上传REACT-NATIVE文件，在使用它时，当我单击按钮时，会出现类似“null不是对象”的错误

我的代码：

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>

pickSingleWithCamera（裁剪，mediaType='photo'）{
ImagePicker.openCamera({
裁剪：裁剪，
宽度：500，
身高：500，
includexif：是的，
媒体类型，
})。然后（图像=>{
console.log（'接收到的图像'，图像）；
这是我的国家({
image:{uri:image.path，width:image.width，height:image.height，mime:image.mime}，
图像：空
});
}).捕获（e=>警报（e））；
}
this.pickSingleWithCamera（false）}style={styles.button}>
使用照相机选择单个图像

我也尝试了绑定（这个），然后我没有得到错误，但没有从相机响应

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

this.pickSingleWithCamera.bind（this）}style={styles.button}>
使用照相机选择单个图像

这是我的全部代码

export default class AddPostScreen extends React.Component {

  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));
  }

  pickSingleBase64(cropit) {
    ImagePicker.openPicker({
      width: 300,
      height: 300,
      cropping: cropit,
      includeBase64: true,
      includeExif: true,
    }).then(image => {
      console.log('received base64 image');
      this.setState({
        image: { uri: `data:${image.mime};base64,` + image.data, width: image.width, 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', image);
      this.setState({
        image: { uri: image.path, width: image.width, height: image.height, mime: image.mime },
        images: null
      });
    }).catch(e => {
      console.log(e);
      Alert.alert(e.message ? e.message : e);
    });
  }

  pickSingle(cropit, circular = false, mediaType) {
    ImagePicker.openPicker({
      width: 500,
      height: 500,
      cropping: cropit,
      cropperCircleOverlay: circular,
      compressImageMaxWidth: 1000,
      compressImageMaxHeight: 1000,
      compressImageQuality: 1,
      compressVideoPreset: 'MediumQuality',
      includeExif: true,
    }).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 => {
      console.log(e);
      Alert.alert(e.message ? e.message : 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;
  }

  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, height: 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>

)
}

导出默认类AddPostScreen扩展React.Component{
pickSingleWithCamera（裁剪，媒体类型='photo'）{
ImagePicker.openCamera({
裁剪：裁剪，
宽度：500，
身高：500，
includexif：是的，
媒体类型，
})。然后（图像=>{
console.log（'接收到的图像'，图像）；
这是我的国家({
image:{uri:image.path，width:image.width，height:image.height，mime:image.mime}，
图像：空
});
}).捕获（e=>警报（e））；
}
pickSingleBase64（cropit）{
ImagePicker.openPicker({
宽度：300，
身高：300，
种植：大棚，
这是真的，
includexif：是的，
})。然后（图像=>{
log（'receivedbase64映像'）；
这是我的国家({
image:{uri:`data:${image.mime}；base64，`+image.data，宽度：image.width，高度：image.height}，
图像：空
});
}).捕获（e=>警报（e））；
}
清理图像（）{
ImagePicker.clean（）。然后（（）=>{
log（'从tmp目录中删除了tmp映像'）；
}).catch（e=>{
警报（e）；
});
}
cleanupSingleImage（）{
设image=this.state.image | |（this.state.images&&this.state.images.length？this.state.images[0]：null）；
log（'will cleanup image'，image）；
ImagePicker.CleanSSingle（image？image.uri:null）。然后（（）=>{
log（`removed tmp image${image.uri}来自tmp目录`）；
}).catch（e=>{
警报（e）；
})
}
cropLast（）{
如果（！this.state.image）{
返回Alert.Alert（'无图像'，'仅在打开裁剪之前，请选择图像'）；
}
ImagePicker.openCropper({
路径：this.state.image.uri，
宽度：200，
身高：200
})。然后（图像=>{
console.log（'接收到的裁剪图像'，图像）；
这是我的国家({
image:{uri:image.path，width:image.width，height:image.height，mime:image.mime}，
图像：空
});
}).catch（e=>{
控制台日志（e）；
警报。警报（e.message？e.message:e）；
});
}
pickSingle（cropit，circular=false，mediaType）{
ImagePicker.openPicker({
宽度：500，
身高：500，
种植：大棚，
cropperCircleOverlay：圆形，
压缩图像最大宽度：1000，
压缩最大高度：1000，
压缩图像质量：1，
压缩视频预设：“中等质量”，
includexif：是的，
})。然后（图像=>{
console.log（'接收到的图像'，图像）；
这是我的国家({
image:{uri:image.path，width:image.width，height:image.height，mime:image.mime}，
图像：空
});
}).catch（e=>{
控制台日志（e）；
警报。警报（e.message？e.message:e）；
});
}
pickMultiple（）{
ImagePicker.openPicker({
多重：对，
waitAnimationEnd:false，
includexif：是的，
是的，
})。然后（图像=>{
这是我的国家({
图像：空，
images:images.map（i=>{
console.log（'received image'，i）；
返回{uri:i.path，width:i.width，height:i.height，mime:i.mime}；
})
});
}).捕获（e=>警报（e））；
}
缩放高度（旧、旧、新）{
返回（旧/旧）*新；
}
renderVideo（视频）{
console.log（“渲染视频”）；
返回(
console.log（e）}
onLoad={load=>console.log（load）}
重复={true}/>
);
}
渲染（图像）{
返回
}
渲染集（图像）{
if（image.mime&&image.mime.toLowerCase（）.indexOf（'video/'）！=-1）{
返回此.renderVideo（图像）；
}
返回此.renderImage（图像）；
}
render（）{
返回(
this.pickSingleWithCamera.bind（this）}style={styles.button}>
使用照相机选择单个图像
this.pickSingleWithCamera（false，mediaType='video'）}style={styles.button}>
选择带有摄像头的单个视频
this.pickSingleWithCamera.bind（this）}style={styles.button}>
选择带有裁剪的“单个摄影机”
this.pickssingle（false）}style={styles.button}>
单选
this.cropLast（）}style={styles.button}>
裁剪上次选择的图像
this.pickSingleBase64（false）}style={styles.button}>
选择单个返回Base64
this.pickSingle（true）}style={styles.button}>
选择带有裁剪的单个
this.pickSingle（true，true）}style={styles.button}>
选择带有圆形裁剪的“单个”
选择多个
清理所有图像
清理单个图像