React Native Expo Camera Preview 未显示

Question

我是 React Native 的新手，我想从 Expo 中实现相机组件来使用它，我按照文档中给出的教程进行操作，但它对我不起作用。这是我在相机 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>
            );
        }
    }
}

并使用 native-base 将其添加到 App.js 中的渲染方法中：

  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 />;
    }
  }
}

可能是什么问题？我似乎无法理解为什么相机预览没有显示在应用程序中，我坚持这一点。任何帮助表示赞赏。

Answer 1

尝试给出高度参数而不是 flex，flex 对我也不起作用。

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

这不是一个好的解决方案，但看到问题在于样式。

Answer 2

改为：const { status } = await Permissions.askAsync(Permissions.CAMERA); 试试这个：

import * as Permissions from "expo-permissions";
...
const { status } = await Permissions.askAsync(Permissions.CAMERA);