[英]React Native Expo Camera Preview is not showing
I'm new to React Native and I wanted to implement the camera component from Expo to use it, I followed the tutorial given in the documentation but it didn't work for me.我是 React Native 的新手,我想从 Expo 实现相机组件来使用它,我按照文档中给出的教程进行操作,但它对我不起作用。 Here is the code I used in my Camera js file:
这是我在我的相机 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>
);
}
}
}
and added it to the render method in App.js like this using native-base:并使用 native-base 将其添加到 App.js 中的 render 方法中,如下所示:
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 />;
}
}
}
What could be the problem?可能是什么问题呢? I can't seem to understand why is the camera preview not showing in the app and I'm stuck to this.
我似乎无法理解为什么相机预览没有显示在应用程序中,我一直坚持这个。 Any help is appreciated.
任何帮助表示赞赏。
Try giving a height parameter instead of flex, flex didn't work for me either.尝试给出一个高度参数而不是 flex,flex 对我也不起作用。
<Camera type={this.state.type} style={{height: 300}}/>
It's not a good solution but seeing the problem is about styling is something.这不是一个好的解决方案,但看到问题是关于样式的。
Instead : const { status } = await Permissions.askAsync(Permissions.CAMERA);
相反:
const { status } = await Permissions.askAsync(Permissions.CAMERA);
Try this:尝试这个:
import * as Permissions from "expo-permissions";
...
const { status } = await Permissions.askAsync(Permissions.CAMERA);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.