import {Button} from '@rneui/base';
import React, {useState, useEffect, useRef} from 'react';
import {
View,
TextInput,
Text,
FlatList,
Modal,
TouchableOpacity,
Image,
StyleSheet,
} from 'react-native';
import {Camera, useCameraDevices} from 'react-native-vision-camera';
const ReportComponent = () => {
const [reports, setReports] = useState([]);
const [newReport, setNewReport] = useState('');
const [editingIndex, setEditingIndex] = useState(null);
const [isModalVisible, setIsModalVisible] = useState(false);
const [isCameraVisible, setIsCameraVisible] = useState(false);
// const [capturedImage, setCapturedImage] = useState(null);
const devices = useCameraDevices('wide-angle-camera');
const device = devices.back;
const mycam = useRef(null);
const [pics, setPics] = useState([]);
const [newPic, setNewPic] = useState('');
const [picIndex, setPicIndex] = useState(null);
const addReport = () => {
if (newReport.trim() === '') {
return;
}
if (editingIndex !== null) {
// Editing existing report
const updatedReports = [...reports];
updatedReports[editingIndex] = newReport;
setReports(updatedReports);
setNewReport('');
setEditingIndex(null);
} else {
// Adding new report
setReports([...reports, newReport]);
setNewReport('');
}
setIsModalVisible(false);
};
const addPic = () => {
if (newPic.trim() === '') {
return;
}
if (picIndex !== null) {
// Editing existing pic
const updatedPics = [...pics];
updatedPics[picIndex] = newPic;
setPics(updatedPics);
setNewPic('');
setPicIndex(null);
} else {
// Adding new report
setPics([...pics, newPic]);
setNewPic('');
}
setIsModalVisible(false);
};
const deleteReport = index => {
const updatedReports = [...reports];
updatedReports.splice(index, 1);
setReports(updatedReports);
};
const editReport = index => {
const reportToEdit = reports[index];
setNewReport(reportToEdit);
setEditingIndex(index);
setIsModalVisible(true);
};
const toggleModal = () => {
setIsModalVisible(!isModalVisible);
};
const toggleCamera = () => {
setIsCameraVisible(!isCameraVisible);
toggleModal();
};
const handleCapture = async () => {
console.log('handlecapture run');
if (mycam != null) {
const photo = await mycam.current.takePhoto();
console.log('CAMERAPIC: ', photo.path);
setNewPic(photo.path);
addPic();
setIsCameraVisible(false);
toggleModal();
}
};
return (
<View style={{flex: 1}}>
<Button title="Add Report" onPress={toggleModal} />
<FlatList
data={reports}
renderItem={({item, index}) => (
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Text style={{flex: 1}}>{item}</Text>
<Button title="Edit" onPress={() => editReport(index)} />
<Button title="Delete" onPress={() => deleteReport(index)} />
</View>
)}
keyExtractor={(item, index) => index.toString()}
/>
<Modal visible={isModalVisible} animationType="slide" transparent={true}>
<View
style={{
flex: 1,
justifyContent: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
}}>
<View style={{margin: 20, backgroundColor: 'white', padding: 20}}>
<TextInput
placeholder="Enter report (max 10 lines)"
value={newReport}
onChangeText={setNewReport}
multiline={true}
numberOfLines={10}
style={{height: 150, borderWidth: 1, padding: 10}}
/>
<TouchableOpacity onPress={toggleCamera}>
<Text
style={{color: 'blue', textAlign: 'center', marginBottom: 10}}>
Take Picture
</Text>
</TouchableOpacity>
{/* {capturedImage && (
<View style={{alignItems: 'center', marginBottom: 10}}>
<Image
source={{uri: capturedImage.uri}}
style={{width: 200, height: 200}}
/>
</View>
)} */}
<Button
title={editingIndex !== null ? 'Update Report' : 'Add Report'}
onPress={addReport}
/>
<TouchableOpacity onPress={toggleModal} style={{marginTop: 10}}>
<Text style={{color: 'blue', textAlign: 'center'}}>Cancel</Text>
</TouchableOpacity>
{console.log('PICS::::::', pics[0])}
</View>
</View>
</Modal>
{isCameraVisible && (
<View style={StyleSheet.absoluteFill}>
<Camera
style={{flex: 1}}
autoFocus="on"
photo={true}
device={device}
isActive={isCameraVisible}
ref={mycam}
/>
<TouchableOpacity
onPress={() => {
handleCapture();
}}
style={{
flex: 1,
height: 50,
width: 50,
borderRadius: 30,
backgroundColor: 'red',
position: 'absolute',
bottom: 50,
alignSelf: 'center',
}}></TouchableOpacity>
</View>
)}
<View>
<Image
source={{uri: `file://${pics[0]}`}}
style={{width: 100, height: 100}}
/>
</View>
</View>
);
};
export default ReportComponent;
我试图写一个应用程序,可以创建一个报告,并采取照片的报告,其工作,但我不能使相机的工作在上述代码中的handleCapture
函数没有调用时,我按下它。但是我可以在屏幕上看到摄像头。日志中没有任何内容,除了当我在Xcode中运行它时,我看到紫色字体的HNG RISK,我在这里做错了什么
1条答案
按热度按时间mi7gmzs61#
似乎有几个问题:
将onPress更改为此。你的根本没人点击。