Removed Cameraview.tsx and call Cameraview directly in ScannerScreen, Added enableTorch

This commit is contained in:
2024-06-11 20:37:18 +08:00
parent ef3766e3df
commit d4e285012b
2 changed files with 27 additions and 25 deletions

View File

@@ -1,23 +0,0 @@
import React from 'react';
import { Camera } from 'expo-camera';
import { View, StyleSheet } from 'react-native';
interface CameraViewProps {
onBarcodeScanned?: (data: any) => void;
barcodeScannerSettings?: any;
style?: any;
}
const CameraView: React.FC<CameraViewProps> = ({ onBarcodeScanned, barcodeScannerSettings, style }) => {
return (
<View style={style}>
<CameraView
style={StyleSheet.absoluteFillObject}
onBarcodeScanned={onBarcodeScanned}
barcodeScannerSettings={barcodeScannerSettings}
/>
</View>
);
};
export default CameraView;

View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect, useContext } from 'react'; import React, { useState, useEffect, useContext } from 'react';
import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native'; import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native';
import { CameraView, Camera } from 'expo-camera'; import { Camera, CameraView } from 'expo-camera';
import { QRCodeContext } from '../types'; import { QRCodeContext } from '../types';
import axios from 'axios'; import axios from 'axios';
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
@@ -21,6 +21,7 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
const [scannedData, setScannedData] = useState<string>(''); const [scannedData, setScannedData] = useState<string>('');
const [scanResult, setScanResult] = useState<any>(null); // State for VirusTotal scan result const [scanResult, setScanResult] = useState<any>(null); // State for VirusTotal scan result
const [dataType, setDataType] = useState<string>(''); // State for data type const [dataType, setDataType] = useState<string>(''); // State for data type
const [enableTorch, setEnableTorch] = useState<boolean>(false); // State for torch
useEffect(() => { useEffect(() => {
const initializeApp = async () => { const initializeApp = async () => {
@@ -115,7 +116,11 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
}); });
return unsubscribe; return unsubscribe;
}, [navigation]); }, [navigation]);
const toggleTorch = () => {
setEnableTorch((prev) => !prev);
};
if (showSplash) { if (showSplash) {
return ( return (
<View style={styles.splashContainer}> <View style={styles.splashContainer}>
@@ -145,7 +150,14 @@ const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
onBarcodeScanned={scanned ? undefined : handleQRCodeScanned} onBarcodeScanned={scanned ? undefined : handleQRCodeScanned}
barcodeScannerSettings={{ barcodeTypes: ['qr', 'pdf417'] }} barcodeScannerSettings={{ barcodeTypes: ['qr', 'pdf417'] }}
style={styles.camera} style={styles.camera}
enableTorch={enableTorch}
/> />
<TouchableOpacity onPress={toggleTorch} style={styles.flashButton}>
<Ionicons name="flashlight" size={24} color="#fff" />
<Text style={styles.flashText}>
{enableTorch ? 'Turn Off' : 'Turn On'} Torch
</Text>
</TouchableOpacity>
</View> </View>
{scannedData !== '' && ( {scannedData !== '' && (
<View style={styles.dataBox}> <View style={styles.dataBox}>
@@ -207,6 +219,19 @@ const styles = StyleSheet.create({
width: '100%', width: '100%',
height: '100%', height: '100%',
}, },
flashButton: {
position: 'absolute',
bottom: 20,
alignSelf: 'center',
alignItems: 'center',
backgroundColor: '#000',
padding: 10,
borderRadius: 5,
},
flashText: {
color: '#fff',
marginTop: 5,
},
dataBox: { dataBox: {
position: 'absolute', position: 'absolute',
top: '10%', top: '10%',