|
@@ -4,82 +4,21 @@
|
|
|
* 升级到 react-native-vision-camera
|
|
* 升级到 react-native-vision-camera
|
|
|
*/
|
|
*/
|
|
|
/* eslint-disable no-undef */
|
|
/* eslint-disable no-undef */
|
|
|
-import React, { Component, useEffect, useState } from 'react'
|
|
|
|
|
-import { Pressable, StyleSheet, View, Vibration } from 'react-native'
|
|
|
|
|
-import { Camera, useCameraDevice, useCodeScanner } from 'react-native-vision-camera';
|
|
|
|
|
|
|
+import React, { Component } from 'react'
|
|
|
|
|
+import { StyleSheet, View, Vibration, AppState } from 'react-native'
|
|
|
import apiCharge from '../../api/apiCharge';
|
|
import apiCharge from '../../api/apiCharge';
|
|
|
import { PageList } from '../Router';
|
|
import { PageList } from '../Router';
|
|
|
import Dialog from '../../components/Dialog';
|
|
import Dialog from '../../components/Dialog';
|
|
|
import app from '../../../app.json';
|
|
import app from '../../../app.json';
|
|
|
import Button from '../../components/Button';
|
|
import Button from '../../components/Button';
|
|
|
-import TextView from '../../components/TextView';
|
|
|
|
|
import { EnterStationDialog } from '../chargeV2/Charging';
|
|
import { EnterStationDialog } from '../chargeV2/Charging';
|
|
|
import QRResult from './QRResult';
|
|
import QRResult from './QRResult';
|
|
|
import utils from '../../utils/utils';
|
|
import utils from '../../utils/utils';
|
|
|
|
|
+import QRScanner from './QRScanner';
|
|
|
|
|
|
|
|
-// 函数组件:QR码扫描器
|
|
|
|
|
-const QRScanner = ({ onCodeScanned, isActive }) => {
|
|
|
|
|
- const [flashOn, switchFlash] = useState(false);
|
|
|
|
|
- const [hasPermission, setHasPermission] = useState(false);
|
|
|
|
|
- const device = useCameraDevice('back');
|
|
|
|
|
- useEffect(() => {
|
|
|
|
|
- console.log("相机设备", device);
|
|
|
|
|
- utils.logEventTracking("scan_camera_devices", (utils.isNotEmpty(device) ? "OK" : "NULL"))
|
|
|
|
|
- Camera.requestCameraPermission().then(res => {
|
|
|
|
|
- console.log("相机权限请求", res);
|
|
|
|
|
- utils.logEventTracking("scan_camera_permission", res)
|
|
|
|
|
- setHasPermission(res == 'granted');
|
|
|
|
|
- }).catch(err => {
|
|
|
|
|
- console.warn("相机权限请求错误", err);
|
|
|
|
|
- utils.logEventTracking("scan_camera_permission_error", err)
|
|
|
|
|
- });
|
|
|
|
|
- }, []);
|
|
|
|
|
- const codeScanner = useCodeScanner({
|
|
|
|
|
- codeTypes: ['qr'],
|
|
|
|
|
- onCodeScanned: (codes) => {
|
|
|
|
|
- if (codes?.length > 0 && isActive) {
|
|
|
|
|
- const code = codes[0];
|
|
|
|
|
- onCodeScanned(code.value || "");
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- return (
|
|
|
|
|
- (device && hasPermission)
|
|
|
|
|
- ? <>
|
|
|
|
|
- <Camera
|
|
|
|
|
- style={{width: $width, height: $vh(110)}}
|
|
|
|
|
- device={device}
|
|
|
|
|
- isActive={isActive}
|
|
|
|
|
- codeScanner={codeScanner}
|
|
|
|
|
- enableZoomGesture={true}
|
|
|
|
|
- photo={false}
|
|
|
|
|
- video={false}
|
|
|
|
|
- audio={false}
|
|
|
|
|
- resizeMode="cover"
|
|
|
|
|
- torch={flashOn ? 'on' : 'off'}
|
|
|
|
|
- />
|
|
|
|
|
- { isActive &&
|
|
|
|
|
- <Pressable
|
|
|
|
|
- style={styles.flashLight}
|
|
|
|
|
- onPress={() => switchFlash(!flashOn)}>
|
|
|
|
|
- <MaterialIcons
|
|
|
|
|
- name={flashOn ? "flashlight-on" : "flashlight-off"}
|
|
|
|
|
- size={36}
|
|
|
|
|
- color="#fff"/>
|
|
|
|
|
- </Pressable>
|
|
|
|
|
- }
|
|
|
|
|
- </>
|
|
|
|
|
- : <View style={styles.tipsScreen}>
|
|
|
|
|
- <TextView style={styles.tipsText}>
|
|
|
|
|
- Camera access has been denied. Please enable it in your device settings.
|
|
|
|
|
- </TextView>
|
|
|
|
|
- </View>
|
|
|
|
|
- );
|
|
|
|
|
-};
|
|
|
|
|
|
|
+const showInputStationView = true;
|
|
|
|
|
|
|
|
export default class QRScan extends Component {
|
|
export default class QRScan extends Component {
|
|
|
-
|
|
|
|
|
constructor(props) {
|
|
constructor(props) {
|
|
|
super(props);
|
|
super(props);
|
|
|
this.state={
|
|
this.state={
|
|
@@ -88,6 +27,8 @@ export default class QRScan extends Component {
|
|
|
params: this.props.route.params,
|
|
params: this.props.route.params,
|
|
|
showInputStation: false
|
|
showInputStation: false
|
|
|
}
|
|
}
|
|
|
|
|
+ this.scaning = false;
|
|
|
|
|
+ this.stateListener;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
componentDidMount() {
|
|
@@ -99,7 +40,7 @@ export default class QRScan extends Component {
|
|
|
}, 200);
|
|
}, 200);
|
|
|
});
|
|
});
|
|
|
this.props.navigation.addListener('beforeRemove', (e) => {
|
|
this.props.navigation.addListener('beforeRemove', (e) => {
|
|
|
- if (!this.state.isResult) {
|
|
|
|
|
|
|
+ if (!isIOS && !this.state.isResult) {
|
|
|
e.preventDefault();
|
|
e.preventDefault();
|
|
|
this.setState({
|
|
this.setState({
|
|
|
isResult: true
|
|
isResult: true
|
|
@@ -110,14 +51,47 @@ export default class QRScan extends Component {
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
|
|
+ this.stateListener = AppState.addEventListener("change", state => {
|
|
|
|
|
+ console.log("state change", state);
|
|
|
|
|
+ if (state == 'active') {
|
|
|
|
|
+ if (this.state.isResult) {
|
|
|
|
|
+ this.setState({
|
|
|
|
|
+ isResult: false
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.setState({
|
|
|
|
|
+ isResult: true
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
utils.logEventTracking("scan_qr_click")
|
|
utils.logEventTracking("scan_qr_click")
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- scanResult = (msg) => {
|
|
|
|
|
|
|
+ componentWillUnmount() {
|
|
|
|
|
+ if (this.stateListener) {
|
|
|
|
|
+ this.stateListener.remove();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ scanResult = (codes) => {
|
|
|
|
|
+ if (this.scaning) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.scaning = true;
|
|
|
|
|
+ Vibration.vibrate(100);
|
|
|
this.setState({
|
|
this.setState({
|
|
|
isResult: true
|
|
isResult: true
|
|
|
|
|
+ }, () => {
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ this.scaning = false;
|
|
|
|
|
+ }, 300);
|
|
|
|
|
+ const msg = codes[0]
|
|
|
|
|
+ this.getQrMessage(msg);
|
|
|
});
|
|
});
|
|
|
- Vibration.vibrate(100);
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ getQrMessage(msg) {
|
|
|
utils.logEventTracking("scan_qr_result", msg)
|
|
utils.logEventTracking("scan_qr_result", msg)
|
|
|
if (msg.indexOf('::') > 0) {
|
|
if (msg.indexOf('::') > 0) {
|
|
|
const arr = msg.split('::');
|
|
const arr = msg.split('::');
|
|
@@ -150,6 +124,12 @@ export default class QRScan extends Component {
|
|
|
this.setState({
|
|
this.setState({
|
|
|
isResult: false
|
|
isResult: false
|
|
|
});
|
|
});
|
|
|
|
|
+ },
|
|
|
|
|
+ onBackPress: btn => {
|
|
|
|
|
+ Dialog.dismissDialog();
|
|
|
|
|
+ this.setState({
|
|
|
|
|
+ isResult: false
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
@@ -225,14 +205,16 @@ export default class QRScan extends Component {
|
|
|
return (
|
|
return (
|
|
|
<View style={styles.container}>
|
|
<View style={styles.container}>
|
|
|
<QRScanner
|
|
<QRScanner
|
|
|
- onCodeScanned={this.scanResult}
|
|
|
|
|
|
|
+ onResult={this.scanResult}
|
|
|
isActive={!this.state.isResult}
|
|
isActive={!this.state.isResult}
|
|
|
/>
|
|
/>
|
|
|
- <Button
|
|
|
|
|
- style={styles.btnStationInput}
|
|
|
|
|
- text={$t('charging.enterStationId')}
|
|
|
|
|
- textColor={"rgba(255,255,255,.8)"}
|
|
|
|
|
- onClick={() => this.onEnterStation(true)}/>
|
|
|
|
|
|
|
+ { showInputStationView &&
|
|
|
|
|
+ <Button
|
|
|
|
|
+ style={styles.btnStationInput}
|
|
|
|
|
+ text={$t('charging.enterStationId')}
|
|
|
|
|
+ textColor={"rgba(255,255,255,.8)"}
|
|
|
|
|
+ onClick={() => this.onEnterStation(true)}/>
|
|
|
|
|
+ }
|
|
|
<EnterStationDialog
|
|
<EnterStationDialog
|
|
|
visible={this.state.showInputStation}
|
|
visible={this.state.showInputStation}
|
|
|
stationId={this.state.params?.id}
|
|
stationId={this.state.params?.id}
|
|
@@ -251,25 +233,6 @@ const styles = StyleSheet.create({
|
|
|
backgroundColor: '#000',
|
|
backgroundColor: '#000',
|
|
|
...StyleSheet.absoluteFillObject
|
|
...StyleSheet.absoluteFillObject
|
|
|
},
|
|
},
|
|
|
- tipsScreen: {
|
|
|
|
|
- flex: 1,
|
|
|
|
|
- padding: 48,
|
|
|
|
|
- alignItems: "center",
|
|
|
|
|
- justifyContent: "center",
|
|
|
|
|
- backgroundColor: '#444',
|
|
|
|
|
- },
|
|
|
|
|
- tipsText: {
|
|
|
|
|
- color: textLight,
|
|
|
|
|
- fontSize: 14,
|
|
|
|
|
- textAlign: "center"
|
|
|
|
|
- },
|
|
|
|
|
- flashLight: {
|
|
|
|
|
- bottom: 120,
|
|
|
|
|
- zIndex: 2,
|
|
|
|
|
- opacity: 0.7,
|
|
|
|
|
- padding: 8,
|
|
|
|
|
- position: 'absolute'
|
|
|
|
|
- },
|
|
|
|
|
btnStationInput: {
|
|
btnStationInput: {
|
|
|
left: 16,
|
|
left: 16,
|
|
|
right: 16,
|
|
right: 16,
|
|
@@ -277,5 +240,5 @@ const styles = StyleSheet.create({
|
|
|
zIndex: 2,
|
|
zIndex: 2,
|
|
|
position: 'absolute',
|
|
position: 'absolute',
|
|
|
backgroundColor: "rgba(0,0,0,.4)"
|
|
backgroundColor: "rgba(0,0,0,.4)"
|
|
|
- },
|
|
|
|
|
|
|
+ }
|
|
|
})
|
|
})
|