@react-native-ohos/react-native-qr-decode-image-camera 1.1.4-rc.1

package/src/QRScanner.jsx

@@ -0,0 +1,281 @@
+import React, { PureComponent, Component } from "react";
+import { RNCamera } from "react-native-camera";
+import PropTypes from "prop-types";
+
+import {
+  StyleSheet,
+  View,
+  Text,
+  Vibration,
+  Platform,
+} from "react-native";
+import QRScannerView from "./QRScannerView";
+import QRScannerHarmony from "./QRScanner.harmony.jsx"
+/**
+ * Scan interface
+ */
+
+
+export default class QRScanner extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      scanning: false,
+      barCodeSize: {}
+    };
+  }
+
+  static defaultProps = {
+    onRead: () => { },
+    renderTopView: () => { },
+    renderBottomView: () => (
+      <View style={{ flex: 1, backgroundColor: "#0000004D" }} />
+    ),
+    rectHeight: 200,
+    rectWidth: 200,
+    flashMode: false, // Flashlight mode
+    finderX: 0, // Viewfinder X-axis offset
+    finderY: 0, // Viewfinder Y-axis offset
+    zoom: 0.2, // Zoom range 0 - 1
+    translucent: false,
+    isRepeatScan: false,
+    cameraType: "back",
+    notAuthorizedView: () => (
+      <View style={styles.authorizationContainer}>
+        <Text style={styles.notAuthorizedText}>Camera not authorized</Text>
+      </View>
+    ),
+    vibrate: true,
+  };
+
+  render() {
+    if (Platform.OS == 'harmony') {
+      return (
+        <QRScannerHarmony {...this.props} />
+      )
+    } else {
+      return (
+        <View
+          style={{
+            flex: 1
+          }}
+        >
+          <RNCamera
+            style={{
+              flex: 1
+            }}
+            captureAudio={false}
+            onBarCodeRead={this._handleBarCodeRead}
+            androidCameraPermissionOptions={null}
+            androidRecordAudioPermissionOptions={null}
+            notAuthorizedView={this.props.notAuthorizedView()}
+            barCodeTypes={[RNCamera.Constants.BarCodeType.qr]}
+            flashMode={
+              !this.props.flashMode
+                ? RNCamera.Constants.FlashMode.off
+                : RNCamera.Constants.FlashMode.torch
+            }
+            zoom={this.props.zoom}
+            type={this.props.cameraType}
+          >
+            <View style={[styles.topButtonsContainer, this.props.topViewStyle]}>
+              {this.props.renderTopView()}
+            </View>
+            <QRScannerView
+              maskColor={this.props.maskColor}
+              cornerColor={this.props.cornerColor}
+              borderColor={this.props.borderColor}
+              rectHeight={this.props.rectHeight}
+              rectWidth={this.props.rectWidth}
+              borderWidth={this.props.borderWidth}
+              cornerBorderWidth={this.props.cornerBorderWidth}
+              cornerBorderLength={this.props.cornerBorderLength}
+              cornerOffsetSize={this.props.cornerOffsetSize}
+              isCornerOffset={this.props.isCornerOffset}
+              bottomHeight={this.props.bottomHeight}
+              scanBarAnimateTime={this.props.scanBarAnimateTime}
+              scanBarColor={this.props.scanBarColor}
+              scanBarHeight={this.props.scanBarHeight}
+              scanBarMargin={this.props.scanBarMargin}
+              hintText={this.props.hintText}
+              hintTextStyle={this.props.hintTextStyle}
+              scanBarImage={this.props.scanBarImage}
+              hintTextPosition={this.props.hintTextPosition}
+              isShowScanBar={this.props.isShowScanBar}
+              finderX={this.props.finderX}
+              finderY={this.props.finderY}
+              returnSize={this.barCodeSize}
+            />
+            <View
+              style={[styles.bottomButtonsContainer, this.props.bottomViewStyle]}
+            >
+              {this.props.renderBottomView()}
+            </View>
+          </RNCamera>
+        </View>
+      );
+    }
+
+  }
+
+  isShowCode = false;
+
+  barCodeSize = size => this.setState({ barCodeSize: size });
+
+  returnMax = (a, b) => (a > b ? a : b);
+
+  returnMin = (a, b) => (a < b ? a : b);
+
+  iosBarCode = e => {
+    let x = Number(e.bounds.origin.x);
+    let y = Number(e.bounds.origin.y);
+    let width = e.bounds.size.width;
+    let height = e.bounds.size.height;
+    let viewMinX = this.state.barCodeSize.x - this.props.finderX;
+    let viewMinY = this.state.barCodeSize.y - this.props.finderY;
+    let viewMaxX =
+      this.state.barCodeSize.x +
+      this.state.barCodeSize.width -
+      width -
+      this.props.finderX;
+    let viewMaxY =
+      this.state.barCodeSize.y +
+      this.state.barCodeSize.height -
+      height -
+      this.props.finderY;
+    if (x > viewMinX && y > viewMinY && x < viewMaxX && y < viewMaxY) {
+      if (this.props.isRepeatScan) {
+        if (this.props.vibrate) {
+          Vibration.vibrate();
+        }
+        this.props.onRead(e);
+      } else {
+        if (!this.isShowCode) {
+          this.isShowCode = true;
+          if (this.props.vibrate) {
+            Vibration.vibrate();
+          }
+          this.props.onRead(e);
+        }
+      }
+    }
+  };
+
+  androidBarCode = e => {
+    // if (!e.bounds[0] || !e.bounds[1] || !e.bounds[2] || !e.bounds[3]) return null;
+    // const leftBottom = {x: e.bounds[0].x / pixelRatio, y: e.bounds[0].y / pixelRatio}
+    // const leftTop= {x: e.bounds[1].x / pixelRatio, y: e.bounds[1].y / pixelRatio}
+    // const rightTop = {x: e.bounds[2].x / pixelRatio, y: e.bounds[2].y / pixelRatio}
+    // const rightBottom = {x: e.bounds[3].x / pixelRatio, y: e.bounds[3].y / pixelRatio}
+    // let x = this.returnMin(leftTop.x, leftBottom.x);
+    // let y = this.returnMin(leftTop.y, rightTop.y);
+    // let width = this.returnMax(rightTop.x - leftTop.x, rightBottom.x - leftBottom.x)
+    // let height = this.returnMax(leftBottom.y - leftTop.y , rightBottom.y - rightTop.y)
+    // let viewMinX = this.state.barCodeSize.x - this.props.finderX * 4 / pixelRatio - (this.props.finderX > 0 ? this.props.finderX/10 : 0)
+    // let viewMinY = this.state.barCodeSize.y - this.props.finderY * 4 / pixelRatio - (this.props.translucent ? 0 : StatusBar.currentHeight)*2/pixelRatio - (this.props.finderY > 0 ? this.props.finderY/3 : this.props.finderY/10*(-1))
+    // let viewMaxX = this.state.barCodeSize.x + 20 + this.state.barCodeSize.width*2 / pixelRatio - width - this.props.finderX *4/pixelRatio - (this.props.finderX < 0 ? 0 : this.props.finderX/5)
+    // let viewMaxY = this.state.barCodeSize.y + this.state.barCodeSize.height*2 / pixelRatio - height - this.props.finderY *4/pixelRatio  - (this.props.translucent ? 0 : StatusBar.currentHeight)*2/pixelRatio - (this.props.finderY < 0 ? this.props.finderY/5 : 0 )
+    // if(x&&y) {
+    //   if ((x > viewMinX && y > viewMinY) && (x < viewMaxX && y < viewMaxY)) {
+    //     if (this.props.isRepeatScan) {
+    //       Vibration.vibrate();
+    //       this.props.onRead(e)
+    //     } else {
+    //       if (!this.isShowCode) {
+    //         this.isShowCode = true;
+    //         Vibration.vibrate();
+    //         this.props.onRead(e)
+    //       }
+    //     }
+    //   }
+    // }
+
+    // The following are unrestricted scanning areas
+    if (this.props.isRepeatScan) {
+      Vibration.vibrate();
+      this.props.onRead(e);
+    } else {
+      if (!this.isShowCode) {
+        this.isShowCode = true;
+        Vibration.vibrate();
+        this.props.onRead(e);
+      }
+    }
+  };
+
+  _handleBarCodeRead = e => {
+    switch (Platform.OS) {
+      case "ios":
+        this.iosBarCode(e);
+        break;
+      case "android":
+        this.androidBarCode(e);
+        break;
+      default:
+        break;
+    }
+  };
+}
+
+const styles = StyleSheet.create({
+  topButtonsContainer: {
+    position: "absolute",
+    height: 100,
+    top: 0,
+    left: 0,
+    right: 0
+  },
+  bottomButtonsContainer: {
+    position: "absolute",
+    height: 100,
+    bottom: 0,
+    left: 0,
+    right: 0
+  },
+  authorizationContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  notAuthorizedText: {
+    textAlign: "center",
+    fontSize: 16
+  }
+});
+
+QRScanner.propTypes = {
+  isRepeatScan: PropTypes.bool,
+  onRead: PropTypes.func,
+  maskColor: PropTypes.string,
+  borderColor: PropTypes.string,
+  cornerColor: PropTypes.string,
+  borderWidth: PropTypes.number,
+  cornerBorderWidth: PropTypes.number,
+  cornerBorderLength: PropTypes.number,
+  rectHeight: PropTypes.number,
+  rectWidth: PropTypes.number,
+  isCornerOffset: PropTypes.bool, //Whether the corners are offset
+  cornerOffsetSize: PropTypes.number,
+  bottomHeight: PropTypes.number,
+  scanBarAnimateTime: PropTypes.number,
+  scanBarColor: PropTypes.string,
+  scanBarImage: PropTypes.any,
+  scanBarHeight: PropTypes.number,
+  scanBarMargin: PropTypes.number,
+  hintText: PropTypes.string,
+  hintTextStyle: PropTypes.object,
+  hintTextPosition: PropTypes.number,
+  renderTopView: PropTypes.func,
+  renderBottomView: PropTypes.func,
+  isShowScanBar: PropTypes.bool,
+  topViewStyle: PropTypes.object,
+  bottomViewStyle: PropTypes.object,
+  flashMode: PropTypes.bool,
+  finderX: PropTypes.number,
+  finderY: PropTypes.number,
+  zoom: PropTypes.number,
+  translucent: PropTypes.bool,
+  cameraType: PropTypes.string,
+  vibrate: PropTypes.bool,
+};

package/src/QRScannerView.js

@@ -0,0 +1,381 @@
+import React, {Component} from 'react';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  View,
+  Animated,
+  Easing,
+  Text,
+  Image,
+  Vibration,
+  Platform,
+  PixelRatio,
+  StatusBar
+} from 'react-native';
+/**
+ * Scanning Interface Mask
+ * Write a separate class for easy copying
+ */
+export default class QRScannerView extends Component {
+  static defaultProps = {
+    maskColor: '#0000004D',
+    cornerColor: '#22ff00',
+    borderColor: '#000000',
+    rectHeight: 200,
+    rectWidth: 200,
+    borderWidth: 0,
+    cornerBorderWidth: 4,
+    cornerBorderLength: 20,
+    cornerOffsetSize: 1,
+    isCornerOffset: true,
+    bottomHeight: 100,
+    scanBarAnimateTime: 2500,
+    scanBarColor: '#22ff00',
+    scanBarImage: null,
+    scanBarHeight: 1.5,
+    scanBarMargin: 6,
+    hintText: 'Put the QR code / bar code into the box and it will scan automatically',
+    hintTextStyle: {
+      color: '#fff',
+      fontSize: 14,
+      backgroundColor: 'transparent'
+    },
+    hintTextPosition: 130,
+    isShowScanBar: true
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      topWidth: 0,
+      topHeight: 0,
+      leftWidth: 0,
+      animatedValue: new Animated.Value(0)
+    }
+    this.isClosed = false;
+  }
+
+  //Get background color
+  getBackgroundColor = () => {
+    return ({backgroundColor: this.props.maskColor});
+  }
+
+  //Get scan box background size
+  getRectSize = () => {
+    return ({height: this.props.rectHeight, width: this.props.rectWidth});
+  }
+
+  //Get scan frame border size
+
+  getBorderSize = () => {
+    if (this.props.isCornerOffset) {
+      return ({
+        height: this.props.rectHeight - this.props.cornerOffsetSize * 2,
+        width: this.props.rectWidth - this.props.cornerOffsetSize * 2
+      });
+    } else {
+      return ({height: this.props.rectHeight, width: this.props.rectWidth});
+    }
+  }
+
+  //Get the color of the corner of the scan frame
+  getCornerColor = () => {
+    return ({borderColor: this.props.cornerColor});
+  }
+
+  //Get the size of the corner of the scan frame
+  getCornerSize = () => {
+    return ({height: this.props.cornerBorderLength, width: this.props.cornerBorderLength});
+  }
+
+  //Get scan frame size
+  getBorderWidth = () => {
+    return ({borderWidth: this.props.borderWidth});
+  }
+
+  //Get scan box color
+  getBorderColor = () => {
+    return ({borderColor: this.props.borderColor});
+  }
+
+  //Measure the size of the entire scanning component
+  measureTotalSize = (e) => {
+    let totalSize = e.layout;
+    this.setState({topWidth: totalSize.width})
+  }
+
+  //Measure the position of the scan frame
+  measureRectPosition = (e) => {
+    let rectSize = e.layout;
+    rectSize.x += this.props.finderX
+    rectSize.y += this.props.finderY
+    this.props.returnSize(rectSize)
+    this.setState({topHeight: rectSize.y, leftWidth: rectSize.x})
+  }
+
+  //Get top mask height
+  getTopMaskHeight = () => {
+    if (this.props.isCornerOffset) {
+      return this.state.topHeight + this.props.rectHeight - this.props.cornerOffsetSize;
+    } else {
+      return this.state.topHeight + this.props.rectHeight;
+    }
+  }
+
+  //Get bottom mask height
+  getBottomMaskHeight = () => {
+    if (this.props.isCornerOffset) {
+      return this.props.rectHeight + this.state.topHeight - this.props.cornerOffsetSize;
+    } else {
+      return this.state.topHeight + this.props.rectHeight;
+    }
+  }
+
+  //Get the left and right mask height
+  getSideMaskHeight = () => {
+    if (this.props.isCornerOffset) {
+      return this.props.rectHeight - this.props.cornerOffsetSize * 2;
+    } else {
+      return this.props.rectHeight;
+    }
+  }
+
+  //Get left and right mask width
+  getSideMaskWidth = () => {
+    if (this.props.isCornerOffset) {
+      return this.state.leftWidth + this.props.cornerOffsetSize;
+    } else {
+      return this.state.leftWidth;
+    }
+  }
+
+  getBottomHeight = () => {
+    return ({bottom: this.props.bottomHeight});
+  }
+
+  getScanBarMargin = () => {
+    return ({marginRight: this.props.scanBarMargin, marginLeft: this.props.scanBarMargin})
+  }
+
+  getScanImageWidth = () => {
+    return this.props.rectWidth - this.props.scanBarMargin * 2
+  }
+
+  //Draw scan lines
+  _renderScanBar = () => {
+    if (!this.props.isShowScanBar) 
+      return;
+    if (this.props.scanBarImage) {
+      return <Image
+        style={{
+        resizeMode: 'contain',
+        width: this.getScanImageWidth(),
+        height:this.props.scanBarHeight
+      }}
+        source={this.props.scanBarImage}/>
+    } else {
+      return <View
+        style={[
+        this.getScanBarMargin(), {
+          backgroundColor: this.props.scanBarColor,
+          height: this.props.scanBarHeight
+        }
+      ]}/>
+    }
+  }
+
+  render() {
+    const animatedStyle = {
+      transform: [
+        {
+          translateY: this.state.animatedValue
+        }
+      ]
+    };
+    return (
+      <View
+        onLayout={({nativeEvent: e}) => this.measureTotalSize(e)}
+        style={[
+        styles.container, this.getBottomHeight()
+      ]}>
+        {/* <View style={{flex:1}}></View> */}
+        <View
+          style={[
+          styles.viewfinder, this.getRectSize(),{top:this.props.finderY,left:this.props.finderX}
+          ]}
+          onLayout={({nativeEvent: e}) => this.measureRectPosition(e)}>
+          <View
+            style={[
+            this.getBorderSize(),
+            this.getBorderColor(),
+            this.getBorderWidth()
+          ]}>
+
+            <Animated.View style={[animatedStyle]}>
+              {this._renderScanBar()}
+            </Animated.View>
+
+          </View>
+          <View
+            style={[
+            this.getCornerColor(),
+            this.getCornerSize(),
+            styles.topLeftCorner, {
+              borderLeftWidth: this.props.cornerBorderWidth,
+              borderTopWidth: this.props.cornerBorderWidth
+            }
+          ]}/>
+          <View
+            style={[
+            this.getCornerColor(),
+            this.getCornerSize(),
+            styles.topRightCorner, {
+              borderRightWidth: this.props.cornerBorderWidth,
+              borderTopWidth: this.props.cornerBorderWidth
+            }
+          ]}/>
+          <View
+            style={[
+            this.getCornerColor(),
+            this.getCornerSize(),
+            styles.bottomLeftCorner, {
+              borderLeftWidth: this.props.cornerBorderWidth,
+              borderBottomWidth: this.props.cornerBorderWidth
+            }
+          ]}/>
+          <View
+            style={[
+            this.getCornerColor(),
+            this.getCornerSize(),
+            styles.bottomRightCorner, {
+              borderRightWidth: this.props.cornerBorderWidth,
+              borderBottomWidth: this.props.cornerBorderWidth
+            }
+          ]}/>
+        </View>
+
+        <View
+          style={[
+          this.getBackgroundColor(),
+          styles.topMask, {
+            bottom: this.getTopMaskHeight() - this.props.finderY * 3,
+            top: 0,
+            width: this.state.topWidth
+          }
+        ]
+        }/>
+
+        <View
+          style={[
+          this.getBackgroundColor(),
+          styles.leftMask, {
+            height: this.getSideMaskHeight(),
+            width: this.getSideMaskWidth() - this.props.finderX ,
+            bottom: this.getTopMaskHeight() - this.props.finderY * 3 - this.getSideMaskHeight()
+          }
+        ]}/>
+
+        <View
+          style={[
+          this.getBackgroundColor(),
+          styles.rightMask, {
+            height: this.getSideMaskHeight(),
+            width: this.getSideMaskWidth() - this.props.finderX * 3,
+            bottom: this.getTopMaskHeight() - this.props.finderY * 3 - this.getSideMaskHeight()
+          }
+        ]}/>
+
+        <View
+          style={[
+          this.getBackgroundColor(),
+          styles.bottomMask, {
+            top: this.getBottomMaskHeight() - this.props.finderY,
+            width: this.state.topWidth
+          }
+        ]}/>
+
+        <View
+          style={{
+          position: 'absolute',
+          bottom: this.props.hintTextPosition
+        }}>
+          <Text style={[this.props.hintTextStyle,{top:this.props.finderY,left:this.props.finderX}]}>{this.props.hintText}</Text>
+        </View>
+
+      </View>
+    );
+  }
+
+  componentDidMount() {
+    this.scannerLineMove();
+  }
+
+  componentWillUnmount() {
+    this.isClosed = true;
+  }
+
+  scannerLineMove() {
+    if (this.isClosed) {
+      return;
+    }
+    this.state.animatedValue.setValue(0); //重置Rotate动画值为0
+    Animated.timing(
+      this.state.animatedValue,
+      {toValue: this.props.rectHeight,
+      duration: this.props.scanBarAnimateTime,
+      easing: Easing.linear,
+      useNativeDriver: true
+    }).start(() => this.scannerLineMove());
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+  },
+  viewfinder: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  topLeftCorner: {
+    position: 'absolute',
+    top: 0,
+    left: 0
+  },
+  topRightCorner: {
+    position: 'absolute',
+    top: 0,
+    right: 0
+  },
+  bottomLeftCorner: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0
+  },
+  bottomRightCorner: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0
+  },
+  topMask: {
+    position: 'absolute',
+    top: 0
+  },
+  leftMask: {
+    position: 'absolute',
+    left: 0
+  },
+  rightMask: {
+    position: 'absolute',
+    right: 0
+  },
+  bottomMask: {
+    position: 'absolute',
+    bottom: 0
+  }
+});