Как запустить камеру RN Expo в полноэкранном режиме с помощью нажатия TouchableOpacity? - PullRequest
Новая
       51

Как запустить камеру RN Expo в полноэкранном режиме с помощью нажатия TouchableOpacity?

0 голосов
/ 19 февраля 2019

У меня есть собственный компонент React, который условно отображает значок «Камера» TouchableOpacity при начальной загрузке экрана, и нажатие этого значка «Камера» TouchableOpacity предназначено для запуска собственной камеры React Native Expo, которая размещена в отдельном компоненте.Я включил ведение журнала для отслеживания своего состояния и подтвердил, что состояние обновляется правильно, запустив компонент «Экспокамера».

Проблема, с которой я сталкиваюсь, заключается в том, что НЕТ МАТЕРИИ, ЧТО Я ПОПРОБУЮ, не могу заставить окно захвата камеры отображаться в полноэкранном режиме, а вместо этого отображает что-то вне окна приложения-симулятора iOS.И когда камера активирована, я не вижу окно захвата, но оно загружает все мои контейнеры, как только камера загружается.

CameraLauncher.js (условно показывает либо значок камеры, либо показывает представление компонента NativeCamera. 

import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, Modal, Text, View } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { Camera } from 'expo';
import { NativeCamera } from './NativeCamera';

export class CameraLauncher extends Component {
    constructor(props) {
      super(props);
      this.setCameraShowing = this.setCameraShowing.bind(this);
      this.state = {
        type: Camera.Constants.Type.back,
        cameraOpen: false
      }
    }
    setCameraShowing(){
      this.setState({cameraOpen: true});
      console.log('hi', this.state.cameraOpen)
    }
      render() {
        const visible = this.state.cameraOpen
        console.log('ho', this.state.cameraOpen)
        if (visible) {
          camera =
            <NativeCamera style={StyleSheet.absoluteFill} />
        } else {
          camera = 
          <TouchableOpacity style={styles.cameraBtn} onPress={() => this.setCameraShowing(true)}>
            <View>
              <Icon
                name="camera"
                size={25}
                color='#2196F3'
              />
            </View>
          </TouchableOpacity>
        }
          return (
            <View>
              {camera}
            </View>
        );
    }
}

    const styles = StyleSheet.create({
        cameraBtn: {
            color: '#2196F3',
            marginTop: -15
        }
    });

NativeCamera.js (фактическое окно камеры) 

import React, { Component } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera, Permissions } from 'expo';


export class NativeCamera extends Component {
  constructor(props) {
    super(props)
    this.state = {
        hasCameraPermission: null,
        type: Camera.Constants.Type.back,
      };
    }

      async componentWillMount() {
        const { status } = await Permissions.askAsync(Permissions.CAMERA);
        this.setState({ hasCameraPermission: status === 'granted' });
      }

      render() {
        const { hasCameraPermission } = this.state;
        if (hasCameraPermission === null) {
          return <View />;
        } else if (hasCameraPermission === false) {
          return <Text>No access to camera</Text>;
        } else {
          return (
            <View style={{ flex: 1 }}>
              <Camera style={{ flex: 1 }} type={this.state.type}>
                <View
                  style={{
                    flex: 1,
                    backgroundColor: 'transparent',
                    flexDirection: 'row',
                  }}>
                  <TouchableOpacity
                    style={{
                      flex: 0.1,
                      alignSelf: 'flex-end',
                      alignItems: 'center',
                    }}
                    onPress={() => {
                      this.setState({
                        type: this.state.type === Camera.Constants.Type.back
                          ? Camera.Constants.Type.front
                          : Camera.Constants.Type.back,
                      });
                    }}>
                    <Text
                      style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
                      {' '}Flip{' '}
                    </Text>
                  </TouchableOpacity>
                </View>
              </Camera>
            </View>
          );
        }
      }
    }

Как сделать так, чтобы окно захвата Expo Camera загружалось по всему экрану? Мне удалось сделать это с помощью <Modal /> с помощью presentationStyle='overFullScreen, но я не знаю, как это сделать с камерой.

Кроме того, да, я уже просматривал это миллион раз и не нашел примеров того, как другие использовали кнопку для запуска камеры. https://docs.expo.io/versions/latest/sdk/camera/

...