Я новичок в 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>
);
}
}
}
и добавил его в метод рендеринга в 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 />;
}
}
}
В чем может быть проблема? Кажется, я не могу понять, почему превью камеры не отображается в приложении, и я придерживаюсь этого. Любая помощь приветствуется.
Попробуйте указать параметр высоты вместо параметра flex, flex у меня тоже не сработал.
<Camera type = {this.state.type} style = {{height: 300}}/>
Это не лучшее решение, но видеть проблему в стиле - это уже кое-что.
Вместо: const { status } = await Permissions.askAsync(Permissions.CAMERA);
Попробуй это:
import * as Permissions from "expo-permissions";
...
const { status } = await Permissions.askAsync(Permissions.CAMERA);
Пожалуйста, опишите свой ответ: Какую проблему вы решили и как она ее решает?
Это фактически решило мою проблему (не экспо, кстати). Спасибо!