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

Posted 2023-03-11

【中文标题】React-Native-Camera Amazon Kindle 7 (5.1.1) 后置摄像头捕捉到纯绿色

【英文标题】：React-Native-Camera Amazon Kindle 7 (5.1.1) Rear Camera captures Solid Green

【发布时间】：2018-06-10 10:14:23

【问题描述】：

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

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

使用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 的消耗...

【参考方案1】：

在 React-Native-Camera 1.1.5 中修复