import React, { useState, useEffect, useRef } from 'react';
import { SafeAreaView, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Camera } from 'expo-camera';
export default function HomePage() {
const [hasCameraPermission, setHasCameraPermission] = useState(null);
const cameraRef = useRef(null);
useEffect(() => {
(async () => {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasCameraPermission(status === 'granted');
})();
}, []);
const requestPermission = async () => {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasCameraPermission(status === 'granted');
};
const takePicture = async () => {
if (cameraRef.current) {
try {
const { uri } = await cameraRef.current.takePictureAsync();
console.info('Picture taken:', uri);
} catch (error) {
console.error('Error taking picture:', error);
}
}
};
return (
<SafeAreaView style = {styles.container}>
<View style = {styles.cameraContainer}>
{hasCameraPermission === null ? (
<Text>Waiting for camera permission...</Text>
) : hasCameraPermission === false ? (
<Text>Camera permission denied.</Text>
) : (
<Camera
style = {styles.camera}
type = {Camera.Constants.Type.back}
ref = {cameraRef}
/>
)}
</View>
<View style = {styles.buttonContainer}>
<TouchableOpacity style = {styles.button} onPress = {requestPermission}>
<Text style = {styles.buttonText}>Allow Permission</Text>
</TouchableOpacity>
<TouchableOpacity style = {styles.button} onPress = {takePicture}>
<Text style = {styles.buttonText}>Take Picture</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f0f0',
},
cameraContainer: {
width: '100%',
height: '70%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
},
camera: {
width: '100%',
height: '100%',
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
width: '100%',
marginTop: 20,
},
button: {
backgroundColor: '#3ABEF9',
paddingVertical: 15,
paddingHorizontal: 30,
borderRadius: 10,
},
buttonText: {
color: 'white',
fontWeight: 'bold',
fontSize: 16,
},
});
app.json
{
"expo": {
"name": "k",
"slug": "k",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"plugins": [
[
"expo-camera",
{
"cameraPermission": "Allow $(PRODUCT_NAME) to access your camera."
}
]
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#ffffff"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
В этом коде я вижу «Ошибка типа: невозможно прочитать свойство «Тип» неопределенного значения.
Эта ошибка находится по адресу: на домашней странице (созданной приложением) в приложении (создано withDevTools(App)) в с помощью DevTools (приложение) в RCTView (созданном View) в представлении (создано AppContainer) в RCTView (созданном View) в представлении (создано AppContainer) в AppContainer в основном (RootComponent), js engine: Hermes» эта ошибка
Вы использовали Camera.Constants.Type.back
для type
реквизита. Пожалуйста, импортируйте CameraType
, как показано ниже, и проверьте:
import { Camera, CameraType } from 'expo-camera/legacy';
.
.
.
const [type, setType] = useState(CameraType.back);
А затем используйте состояние типа для свойства типа в <Camera>
.