Реагировать на разрешение вспышки встроенной камеры, когда состояние камеры готово - PullRequest
Новая
       22

Реагировать на разрешение вспышки встроенной камеры, когда состояние камеры готово

0 голосов
/ 28 апреля 2019

Я использую встроенную камеру с дочерними функциями, как показано на рисунке, или документами (https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md).. При первой попытке использования камеры отображается вид разрешения, который работает как есть. Но после первого использования каждый раз Когда я хочу использовать камеру, приложение быстро отображает вид разрешения, даже если статус «ГОТОВ». Я понял, что проблема в том, что RNCamera предоставляет камеру и информацию о состоянии, но значение состояния обновляется после монтирования компонента.

Значение переходит от 'АВТОРИЗАЦИЯ ПЕНДИНА' к 'ГОТОВ', и поэтому оно мигает в представлении авторизации. Есть ли какое-то решение этой проблемы, чтобы при первом использовании камеры она работала так, как ожидалось, а затем при другом использовании камера не отображала вид авторизации, а сама камера? Заранее спасибо 

<RNCamera>
  {({ camera, status }) => {
     if (status === 'READY'){
        return ( <View>.....Camera.... </View>
        )
     }
     else if (status !== 'READY'){
        return (<CameraPermission/>)
     }
  }}
</RNCamera>

1 Ответ

0 голосов
/ 28 апреля 2019

Вам не нужно обрабатывать разрешение самостоятельно, RNCamera будет обрабатывать его автоматически. Определите свою камеру следующим образом: 

'use strict';
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { RNCamera } from 'react-native-camera';

class BadInstagramCloneApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          style={styles.preview}
          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);
          }}
        />
        <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
          <TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}>
            <Text style={{ fontSize: 14 }}> SNAP </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  takePicture = async function() {
    if (this.camera) {
      const options = { quality: 0.5, base64: true };
      const data = await this.camera.takePictureAsync(options);
      console.log(data.uri);
    }
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  },
});

AppRegistry.registerComponent('BadInstagramCloneApp', () => BadInstagramCloneApp);
...