|
|
|
@ -1,4 +1,4 @@ |
|
|
|
import React from "react"; |
|
|
|
import React from 'react'; |
|
|
|
import { |
|
|
|
import { |
|
|
|
View, |
|
|
|
View, |
|
|
|
Text, |
|
|
|
Text, |
|
|
|
@ -6,92 +6,98 @@ import { |
|
|
|
Dimensions, |
|
|
|
Dimensions, |
|
|
|
ImageBackground, |
|
|
|
ImageBackground, |
|
|
|
StatusBar, |
|
|
|
StatusBar, |
|
|
|
} from "react-native"; |
|
|
|
} from 'react-native'; |
|
|
|
import { useNavigation } from "@react-navigation/native"; |
|
|
|
import {useNavigation} from '@react-navigation/native'; |
|
|
|
import { BarCodeScanner } from "expo-barcode-scanner"; |
|
|
|
import QRCodeScanner from 'react-native-qrcode-scanner'; |
|
|
|
import { Entypo } from "@expo/vector-icons"; |
|
|
|
import {RNCamera} from 'react-native-camera'; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
// import { Entypo } from "@expo/vector-icons";
|
|
|
|
|
|
|
|
import {connect} from 'react-redux'; |
|
|
|
|
|
|
|
|
|
|
|
//style
|
|
|
|
//style
|
|
|
|
import tw from "tailwind-rn"; |
|
|
|
import tw from 'tailwind-rn'; |
|
|
|
import Colors from "../../../../constants/Colors"; |
|
|
|
import Colors from '../../../../constants/Colors'; |
|
|
|
import fontSize from "../../../../constants/fontSize"; |
|
|
|
import fontSize from '../../../../constants/fontSize'; |
|
|
|
|
|
|
|
|
|
|
|
const { width, height } = Dimensions.get("screen"); |
|
|
|
const {width, height} = Dimensions.get('window'); |
|
|
|
|
|
|
|
|
|
|
|
//assets
|
|
|
|
//assets
|
|
|
|
import laptopImage from "../../assets/laptop.png"; |
|
|
|
import laptopImage from '../../assets/laptop.png'; |
|
|
|
|
|
|
|
|
|
|
|
function Scan({ route, theme, page }) { |
|
|
|
function Scan({route, theme, page}) { |
|
|
|
const navigation = useNavigation(); |
|
|
|
const navigation = useNavigation(); |
|
|
|
const [hasPermission, setHasPermission] = React.useState(null); |
|
|
|
const [hasPermission, setHasPermission] = React.useState(null); |
|
|
|
const [scanned, setScanned] = React.useState(false); |
|
|
|
const [scanned, setScanned] = React.useState(false); |
|
|
|
|
|
|
|
|
|
|
|
React.useEffect(() => { |
|
|
|
React.useEffect(() => { |
|
|
|
(async () => { |
|
|
|
(async () => { |
|
|
|
const { status } = await BarCodeScanner.requestPermissionsAsync(); |
|
|
|
const {status} = await BarCodeScanner.requestPermissionsAsync(); |
|
|
|
setHasPermission(status === "granted"); |
|
|
|
setHasPermission(status === 'granted'); |
|
|
|
})(); |
|
|
|
})(); |
|
|
|
}, []); |
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
const handleBarCodeScanned = ({ type, data }) => { |
|
|
|
const handleBarCodeScanned = data => { |
|
|
|
if (page === "activation") { |
|
|
|
if (page === 'activation') { |
|
|
|
navigation.replace("Activation", { |
|
|
|
navigation.replace('Activation', { |
|
|
|
data: data.slice(data.lastIndexOf("/") + 1, data.length), |
|
|
|
data: data.slice(data.lastIndexOf('/') + 1, data.length), |
|
|
|
}); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
navigation.replace("QRContent", { |
|
|
|
navigation.replace('QRContent', { |
|
|
|
data: data.slice(data.lastIndexOf("/") + 1, data.length), |
|
|
|
data: data.slice(data.lastIndexOf('/') + 1, data.length), |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<ImageBackground |
|
|
|
<ImageBackground source={laptopImage} resizeMode="cover" style={{flex: 1}}> |
|
|
|
source={laptopImage} |
|
|
|
|
|
|
|
resizeMode="cover" |
|
|
|
|
|
|
|
style={[tw("w-full"), { height: height - StatusBar.currentHeight }]} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<View |
|
|
|
<View |
|
|
|
style={tw( |
|
|
|
style={tw( |
|
|
|
"flex-1 flex justify-evenly items-center bg-gray-800 bg-opacity-80" |
|
|
|
'flex-1 flex justify-evenly items-center bg-gray-800 bg-opacity-80', |
|
|
|
)} |
|
|
|
)}> |
|
|
|
> |
|
|
|
<View style={{width: height / 2.5, height: height / 2.5, overflow: 'hidden'}}> |
|
|
|
<View style={{ width: height / 2.5, height: height / 2.5 }}> |
|
|
|
<QRCodeScanner |
|
|
|
{hasPermission && !scanned ? ( |
|
|
|
onRead={e => handleBarCodeScanned(e.data)} |
|
|
|
<BarCodeScanner |
|
|
|
flashMode={RNCamera.Constants.FlashMode.off} |
|
|
|
onBarCodeScanned={handleBarCodeScanned} |
|
|
|
topContent={<Text></Text>} |
|
|
|
style={{ width: "100%", height: "100%" }} |
|
|
|
bottomContent={ |
|
|
|
/> |
|
|
|
<TouchableOpacity> |
|
|
|
) : null} |
|
|
|
<Text></Text> |
|
|
|
|
|
|
|
</TouchableOpacity> |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
containerStyle={{ |
|
|
|
|
|
|
|
width: '100%', |
|
|
|
|
|
|
|
height: '100%', |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
cameraContainerStyle={{ |
|
|
|
|
|
|
|
width: '100%', |
|
|
|
|
|
|
|
height: '100%', |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
/> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
|
|
{/* {scanned && ( */} |
|
|
|
{/* {scanned && ( */} |
|
|
|
<TouchableOpacity |
|
|
|
<TouchableOpacity |
|
|
|
onPress={() => navigation.goBack()} |
|
|
|
onPress={() => navigation.goBack()} |
|
|
|
style={[ |
|
|
|
style={[ |
|
|
|
tw("py-2.5 rounded-full flex justify-center flex-row items-center"), |
|
|
|
tw('py-2.5 rounded-full flex justify-center flex-row items-center'), |
|
|
|
{ |
|
|
|
{ |
|
|
|
width: height / 3.5, |
|
|
|
width: height / 3.5, |
|
|
|
borderWidth: 1, |
|
|
|
borderWidth: 1, |
|
|
|
borderColor: Colors.theme1.greenCF, |
|
|
|
borderColor: Colors.theme1.greenCF, |
|
|
|
}, |
|
|
|
}, |
|
|
|
]} |
|
|
|
]}> |
|
|
|
> |
|
|
|
{/* <Entypo |
|
|
|
<Entypo |
|
|
|
|
|
|
|
name="arrow-left" |
|
|
|
name="arrow-left" |
|
|
|
size={fontSize.base} |
|
|
|
size={fontSize.base} |
|
|
|
style={{ marginRight: 5, color: Colors.theme1.greenCF }} |
|
|
|
style={{ marginRight: 5, color: Colors.theme1.greenCF }} |
|
|
|
/> |
|
|
|
/> */} |
|
|
|
<Text |
|
|
|
<Text |
|
|
|
style={[ |
|
|
|
style={[ |
|
|
|
{ |
|
|
|
{ |
|
|
|
color: Colors.theme1.greenCF, |
|
|
|
color: Colors.theme1.greenCF, |
|
|
|
fontSize: fontSize.base, |
|
|
|
fontSize: fontSize.base, |
|
|
|
fontFamily: "Regular", |
|
|
|
fontFamily: 'Regular', |
|
|
|
}, |
|
|
|
}, |
|
|
|
]} |
|
|
|
]}> |
|
|
|
> |
|
|
|
|
|
|
|
بازگشت |
|
|
|
بازگشت |
|
|
|
</Text> |
|
|
|
</Text> |
|
|
|
</TouchableOpacity> |
|
|
|
</TouchableOpacity> |
|
|
|
@ -101,7 +107,7 @@ function Scan({ route, theme, page }) { |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
|
const mapStateToProps = state => ({ |
|
|
|
theme: state.publicApi.theme, |
|
|
|
theme: state.publicApi.theme, |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
Reza_ashrafi
2 years ago