在React Native中以非全屏视图打开相机

时间:2019-06-04 11:53:07

标签: android ios react-native

我试图在一个视图中打开相机,我已经设置了视图的高度和宽度,但是它以全屏模式打开。我已经使用了react-native-camerareact-native-image-crop-picker库。下面是我以前实现的代码:

rendercamera = () =>{
    ImagePicker.openCamera({
        width: width*0.5,
        height: 400,
        cropping: true,
    }).then(image => {
        console.log(image);
    });
}
render() {
    return (
      <View style={styles.containers}>
        <ScrollView>
          <View style={styles.header}>
            <TouchableOpacity onPress={this._goBack}>
              <Image
                style={styles.backicon}
                source={images.backArrowAn}
              />
            </TouchableOpacity>
            <Text style={styles.headerText}>Add Id Card</Text>
            <View style={styles.backicon}></View>
          </View>

          <View
            style={{
              width: width,
              alignItems: "flex-end",
              justifyContent: "center",
              marginTop: height * 0.12,
              alignSelf: "center",
              alignItems: "flex-end"
            }}
          >
          {this.rendercamera()}
          </View>
        </ScrollView>
      </View>
    );
}

有人可以帮忙吗?

1 个答案:

答案 0 :(得分:1)

您的软件包ImagePicker无法执行此操作。尝试使用react-native-camera

<RNCamera
      ref={ref => {
        this.camera = ref;
      }}
      style={{//Your style code
        }}
      type={RNCamera.Constants.Type.back}
      flashMode={RNCamera.Constants.FlashMode.on}
      androidCameraPermissionOptions={{
        title: 'Permission to use camera',
        message: 'We need your permission to use your camera',
        buttonPositive: 'Ok',
        buttonNegative: 'Cancel',
      }}
      androidRecordAudioPermissionOptions={{
        title: 'Permission to use audio recording',
        message: 'We need your permission to use your audio',
        buttonPositive: 'Ok',
        buttonNegative: 'Cancel',
      }}
      onGoogleVisionBarcodesDetected={({ barcodes }) => {
        console.log(barcodes);
      }}
    />