react-native - React-Native-Camera Amazon Kindle 7 (5.1.1) 后置摄像头捕捉到纯绿色

Question

出于某种原因，我用于测试运行最新更新 ( Android 5.1.1) 的 2 台 Amazon Kindle 在使用 React-Native-Camera 捕获时仅产生纯绿色。

我也在我的Xiaomi Mi6, aMi5和 an上进行了测试Asus Zen 8" Tablet，一切正常，但 Kindle 产生了这个奇怪的结果......真正奇怪的是取景器很好，看起来好像会拍照但没有. 前置摄像头也不错。

使用react-native-camera: ^1.1.4

捕获.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';
import { Avatar } from 'react-native-elements';
import { RNCamera } from 'react-native-camera';
import { inject, observer } from 'mobx-react/native';
import ImagePicker from 'react-native-image-crop-picker';

let Type = null;

const typeArr = [
  { Name: 'Front', Type: RNCamera.Constants.Type.front },
  { Name: 'Back', Type: RNCamera.Constants.Type.back },
  { Name: null, Type: RNCamera.Constants.Type.back },
];

const styles = StyleSheet.create({
  entryTitle: {
    fontSize: 22,
    fontWeight: '700',
  },
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  loading: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
  },
});

@inject('store')
@observer
export default class Capture extends Component {
  constructor(props) {
    super(props);

    this.state = { Type: RNCamera.Constants.Type.back, CaptureInProgress: false };
    Type =
      this.props.navigation.state.params.Type == null
        ? null
        : this.props.navigation.state.params.Type;
  }

  state = {
    Type: typeArr.find(element => element.Name === Type).Type,
  };

  barcodeScanned(response) {
    this.props.store.CaptureStore.captureData = response.data;
    this.props.navigation.state.params.AfterCapture();
    this.props.navigation.goBack();
  }

  takePicture = async function () {
    if (this.camera) {
      this.setState({ CaptureInProgress: true });

      const options = { quality: 0.5, base64: true, fixOrientation: true };
      const data = await this.camera.takePictureAsync(options);
      this.props.store.CaptureStore.captureData = data.base64;
      this.props.navigation.state.params.AfterCapture();
      this.setState({ CaptureInProgress: false });

      this.props.navigation.goBack();
    }
  };

  openGallery() {
    ImagePicker.openPicker({
      width: 300,
      height: 400,
      cropping: true,
      includeBase64: true,
    }).then((image) => {
      this.props.store.CaptureStore.captureData = image.data;
      this.props.navigation.state.params.AfterCapture();
      this.props.navigation.goBack();
    });
  }

  switchCamera() {
    if (this.state.Type === RNCamera.Constants.Type.back) {
      this.setState({ Type: RNCamera.Constants.Type.front });
    } else {
      this.setState({ Type: RNCamera.Constants.Type.back });
    }
  }

  renderTakePhotoButton() {
    if (this.props.navigation.state.params.Mode === 'photo') {
      return (
        <View
          style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Avatar
            medium
            rounded
            icon={{ name: 'refresh', color: 'grey', type: 'font-awesome' }}
            onPress={() => this.switchCamera()}
            activeOpacity={1}
          />
          <Avatar
            large
            rounded
            icon={{ name: 'camera', color: 'grey' }}
            onPress={() => this.takePicture()}
            activeOpacity={1}
          />
          <Avatar
            medium
            rounded
            icon={{ name: 'folder-open-o', color: 'grey', type: 'font-awesome' }}
            onPress={() => this.openGallery()}
            activeOpacity={1}
          />
        </View>
      );
    }
    return null;
  }

  render() {
    return (
      <View style={styles.container}>
        <View
          style={{
            height: '10%',
            padding: 10,
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text style={styles.entryTitle}>{this.props.navigation.state.params.Title}</Text>
        </View>

        <View
          style={{
            height: this.props.navigation.state.params.Mode === 'photo' ? '75%' : '90%',
            flexDirection: 'column',
          }}
        >
          <RNCamera
            ref={(ref) => {
              this.camera = ref;
            }}
            style={styles.preview}
            barCodeTypes={
              this.props.navigation.state.params.Mode === 'qr'
                ? [RNCamera.Constants.BarCodeType.qr]
                : []
            }
            type={this.state.Type}
            // flashMode={RNCamera.Constants.FlashMode.on}
            permissionDialogTitle="Permission to use camera"
            permissionDialogMessage="We need your permission to use your camera phone"
            onBarCodeRead={response => this.barcodeScanned(response)}
          />
        </View>

        {this.renderTakePhotoButton()}

        {this.state.CaptureInProgress && (
          <View style={styles.loading}>
            <ActivityIndicator size="large" color="#0000ff" />
          </View>
        )}
      </View>
    );
  }
}

具体来说，这一切都发生在“takePicture”中，afterCapture 只是处理临时在 CaptureStore 中的 base64 的消耗......

Answer 1

在 React-Native-Camera 1.1.5 中修复