ipanel-rnapp-ajb-base 1.0.0

package/app/screens/CommonScreens/ScanQRCodeScreen/index.js

@@ -0,0 +1,407 @@
+import {RNCamera} from 'react-native-camera';
+import React, {Component} from 'react';
+import {
+  Modal,
+  StyleSheet,
+  Animated,
+  Platform,
+  Image,
+  TouchableOpacity,
+  default as Easing,
+  Dimensions,
+  NativeModules,
+} from 'react-native';
+import {View, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {launchImageLibrary} from 'react-native-image-picker';
+// import LocalBarcodeRecognizer from 'react-native-local-barcode-recognizer';
+
+const LocalBarcodeRecognizer = NativeModules?.LocalBarcodeRecognizer;
+
+import ScreenBackHeader from '../../../components/common/ScreenBackHeader';
+
+const px = global.base.scaleSize;
+import applyPermissions from '../../../utils/applyPermissions';
+
+let screenWidth = Dimensions.get('window').width;
+
+export default class ScanQRCode extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      title: this.props.route.params?.title || '扫码',
+      message:
+        this.props.route.params?.message ||
+        '请将设备二维码、条形码对准屏幕中央区域',
+      visible: false,
+      //中间横线动画初始值
+      moveAnim: new Animated.Value(-2),
+      scanDone: false,
+      scanHeight: 0,
+      hasPermissions: false,
+    };
+  }
+
+  async componentDidMount() {
+    await this.requestCameraPermission();
+    // this.startAnimation();
+
+    // 加上定时器异步设置visible，不然ios会白屏，原因暂时不明
+    setTimeout(() => {
+      this.setState({
+        visible: true,
+      });
+    });
+  }
+
+  //请求权限的方法
+  requestCameraPermission = async () => {
+    if (!(await applyPermissions.camera())) {
+      this.props.navigation.goBack();
+    } else {
+      this.setState({
+        hasPermissions: true,
+      });
+    }
+  };
+
+  /** 扫描框动画*/
+  startAnimation = () => {
+    this.state.moveAnim.setValue(-2);
+    Animated.sequence([
+      Animated.timing(this.state.moveAnim, {
+        toValue: this.state.scanHeight - 2,
+        duration: 1500,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+      Animated.timing(this.state.moveAnim, {
+        toValue: -1,
+        duration: 1500,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    ]).start(() => this.startAnimation());
+  };
+
+  onBarCodeRead = result => {
+    if (this.state.scanDone) {
+      return;
+    }
+    const {navigate, getState} = this.props.navigation;
+    const sourceRouteName = this.props.route.params?.sourceRouteName || '';
+    const {data} = result; //只要拿到data就可以了
+    console.log(data, '扫描数据');
+    //扫码后的操作
+    if (data) {
+      const routes = getState().routes;
+      if (routes[routes.length - 2]) {
+        navigate({
+          name: sourceRouteName || routes[routes.length - 2].name,
+          params: {
+            scanResult: data,
+          },
+          merge: true,
+        });
+        this.setState({
+          scanDone: true,
+        });
+      }
+    }
+  };
+
+  handleOnLayout = event => {
+    const {height} = event.nativeEvent.layout;
+    this.setState(
+      {
+        scanHeight: height,
+      },
+      () => {
+        this.startAnimation();
+      },
+    );
+  };
+
+  handleSelectPicture = async () => {
+    if (!LocalBarcodeRecognizer) {
+      global.toast.showToast('当前版本不支持');
+      return;
+    }
+    const result = await launchImageLibrary({
+      mediaType: 'photo',
+      selectionLimit: 1,
+      includeBase64: true,
+    });
+    if (result.didCancel) {
+      console.log('cancel');
+    } else if (result.errorCode) {
+      console.log('error', result);
+    } else {
+      console.log(result.assets[0].base64.substr(0, 10));
+      let data = await LocalBarcodeRecognizer?.decode(
+        result.assets[0].base64,
+        {},
+      );
+      console.log(data, '扫描数据');
+      const {navigate, getState} = this.props.navigation;
+      const sourceRouteName = this.props.route.params?.sourceRouteName || '';
+      //扫码后的操作
+      if (data) {
+        const routes = getState().routes;
+        if (routes[routes.length - 2]) {
+          navigate({
+            name: sourceRouteName || routes[routes.length - 2].name,
+            params: {
+              scanResult: data,
+            },
+            merge: true,
+          });
+          this.setState({
+            scanDone: true,
+          });
+        }
+      }
+    }
+  };
+
+  render() {
+    if (this.state.hasPermissions && this.state.visible) {
+      return (
+        <View
+          animationType="slide"
+          transparent={true}
+          statusBarTranslucent={true}
+          visible={this.state.visible}
+          style={styles.container}
+          onRequestClose={() => {
+            // Alert.alert("Modal has been closed.");
+            // this.setState()
+            this.props.navigation.goBack();
+          }}>
+          <ScreenBackHeader title={this.state.title} />
+
+          <RNCamera
+            ref={ref => {
+              this.camera = ref;
+            }}
+            autoFocus={RNCamera.Constants.AutoFocus.on} /*自动对焦*/
+            style={[styles.preview]}
+            type={RNCamera.Constants.Type.back} /*切换前后摄像头 front前back后*/
+            flashMode={RNCamera.Constants.FlashMode.off} /*相机闪光模式*/
+            onBarCodeRead={this.onBarCodeRead}
+            captureAudio={false}>
+            <View
+              style={{
+                // flex: 1,
+                // justifyContent: 'center',
+                // alignItems: 'center',
+                flex: 1,
+              }}>
+              <View
+                style={{height: px(500), backgroundColor: 'rgba(34,34,34,0.7)'}}
+              />
+              <View
+                style={{
+                  height: screenWidth - px(386),
+                  flexDirection: 'row',
+                }}>
+                <View
+                  style={{flex: 1, backgroundColor: 'rgba(34,34,34,0.7)'}}
+                />
+                <View onLayout={this.handleOnLayout} style={styles.scanBox}>
+                  <Animated.View
+                    style={[{transform: [{translateY: this.state.moveAnim}]}]}>
+                    <Image
+                      source={require('../../../assets/img/scan_move.png')}
+                      style={{
+                        height: px(12),
+                        width: screenWidth - px(386),
+                      }}
+                      resizeMode="contain"
+                    />
+                  </Animated.View>
+                  <Image
+                    source={require('../../../assets/img/scan_border_top_left.png')}
+                    style={styles.topLeftBorder}
+                  />
+                  <Image
+                    source={require('../../../assets/img/scan_border_top_right.png')}
+                    style={styles.topRightBorder}
+                  />
+                  <Image
+                    source={require('../../../assets/img/scan_border_bottom_left.png')}
+                    style={styles.bottomLeftBorder}
+                  />
+                  <Image
+                    source={require('../../../assets/img/scan_border_bottom_right.png')}
+                    style={styles.bottomRightBorder}
+                  />
+                </View>
+                <View
+                  style={{flex: 1, backgroundColor: 'rgba(34,34,34,0.7)'}}
+                />
+              </View>
+              <View
+                style={{
+                  flex: 1,
+                  backgroundColor: 'rgba(34,34,34,0.7)',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                }}>
+                <Text style={styles.rectangleText}>{this.state.message}</Text>
+                <TouchableOpacity
+                  onPress={this.handleSelectPicture}
+                  style={{
+                    marginBottom: px(90),
+                  }}>
+                  <Image
+                    source={require('../../../assets/img/album3.png')}
+                    style={{
+                      width: px(130),
+                      height: px(130),
+                    }}
+                    resizeMode="contain"
+                  />
+                  
+                  <Text style={styles.albumText}>相册</Text>
+                </TouchableOpacity>
+              </View>
+              <View
+                style={{
+                  width: screenWidth - px(386),
+                }}
+              />
+            </View>
+          </RNCamera>
+        </View>
+      );
+    } else {
+      return null;
+    }
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    zIndex: 99999,
+    elevation: 0,
+  },
+  preview: {
+    flex: 1,
+  },
+  rectangleContainer: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  rectangle: {
+    height: 200,
+    width: 200,
+    borderWidth: 1,
+    borderColor: '#fcb602',
+    backgroundColor: 'transparent',
+    borderRadius: 10,
+  },
+  rectangleText: {
+    color: '#fff',
+    marginTop: px(66),
+    fontSize: px(50),
+    marginBottom: px(150),
+    marginHorizontal: px(120),
+    fontWeight: '300',
+  },
+  border: {
+    flex: 0,
+    height: 2,
+    backgroundColor: '#fcb602',
+    // borderRadius: 50,
+  },
+  topLeftBorder: {
+    position: 'absolute',
+    top: -0.3,
+    left: -0.3,
+    width: px(55),
+    height: px(55),
+  },
+  topRightBorder: {
+    position: 'absolute',
+    top: -0.3,
+    right: -0.3,
+    width: px(55),
+    height: px(55),
+  },
+  bottomLeftBorder: {
+    position: 'absolute',
+    bottom: -0.3,
+    left: -0.3,
+    width: px(55),
+    height: px(55),
+  },
+  bottomRightBorder: {
+    position: 'absolute',
+    bottom: -0.3,
+    right: -0.3,
+    width: px(55),
+    height: px(55),
+  },
+  leftBorder: {
+    position: 'absolute',
+    width: px(5),
+    top: 0,
+    left: 0,
+    bottom: 0,
+  },
+  rightBorder: {
+    position: 'absolute',
+    width: px(5),
+    top: 0,
+    right: 0,
+    bottom: 0,
+  },
+  topSection: {
+    backgroundColor: 'transparent',
+    height: px(247),
+  },
+  centerSection: {
+    flexDirection: 'row',
+    height: px(915),
+  },
+  sideSection: {
+    width: px(82),
+    backgroundColor: 'transparent',
+  },
+  bottomBorder: {
+    position: 'absolute',
+    height: px(5),
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  bottomSection: {
+    flex: 1,
+    backgroundColor: 'transparent',
+    alignItems: 'center',
+  },
+  albumImg: {
+    width: px(165),
+    height: px(165),
+    marginTop: px(70),
+  },
+
+  scanBox: {
+    height: screenWidth - px(386),
+    width: screenWidth - px(386),
+    // borderColor: '#eee',
+    // borderWidth: 0.3,
+    // borderStyle: 'solid',
+  },
+
+  albumText: {
+    color: '#fff',
+    fontSize: px(46),
+    marginTop: px(12),
+    textAlign: 'center',
+    fontWeight: '300',
+  },
+});