react-native - React-Native-Camera Amazon Kindle 7 (5.1.1) 背面カメラが緑色に点灯

Question

何らかの理由で、最新の更新プログラム ( Android 5.1.1) を実行してテストするために持っている 2 つの Amazon Kindle は、React-Native-Camera でキャプチャすると、単色の緑色を生成します。

私はまた、すべて正常に動作することをテストしましたXiaomi Mi6が、Kindle はこの奇妙な結果を生成します...本当に奇妙なのは、ビューファインダーが正常であることです。写真を撮るように見えますが、撮影しません. フロントカメラもバッチリです。Mi5Asus Zen 8" Tablet

使用するreact-native-camera: ^1.1.4

Capture.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 で修正済み