React Native Expo Camera Preview не отображается - PullRequest
Новая
       15

React Native Expo Camera Preview не отображается

0 голосов
/ 24 октября 2018

Я новичок в React Native, и я хотел реализовать компонент камеры из Expo, чтобы использовать его, я следовал руководству, приведенному в документации, но он не работал для меня.Вот код, который я использовал в моем файле Camera js: 

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

export default class CameraApp extends Component {
    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 <Text>Hello</Text>;
        } else if(hasCameraPermission === false) {
            return <Text>No access to camera</Text>;
        } else {
            return (
                <View style={{flex: 1}}>
                    <Camera type={this.state.type} style={{flex: 1}}/>
                </View>
            );
        }
    }
}

и добавил его к методу рендеринга в App.js следующим образом, используя native-base: 

  render() {
    if(this.state.fontLoaded === true) {
      return (
        <Container>
          <View style={{flex: 1}}>
            <HeaderNoLeft />
            </View>
          <Content>
            <View style={{flex: 1}}>
              <CameraApp />
            </View>
          </Content>
        </Container>
      );
    } else {
      return <Expo.AppLoading />;
    }
  }
}

Что можетбыть проблемой?Я не могу понять, почему предварительный просмотр камеры не отображается в приложении, и я застрял в этом.Любая помощь приветствуется.

1 Ответ

0 голосов
/ 13 марта 2019

Попробуйте указать параметр высоты вместо flex, flex у меня тоже не сработал.

<Camera type={this.state.type} style={{height: 300}}/>

Это не очень хорошее решение, но проблема заключается в стилизации.

...