条形码的设置区域

时间:2019-01-14 09:59:35

标签: css react-native

实际上,我正在构建一个可扫描条形码的react native组件。这段代码有效,但是我想通过设置一个聚焦条形码的区域来改善它。也许用一条线检测条形码是否存在?

       import React, { Component } from 'react';
       import {
      AppRegistry,
      Dimensions,
     StyleSheet,
     Text,
    TouchableHighlight,
   View
   } from 'react-native';
    import Camera from 'react-native-camera';

  export default class CameraScreen extends Component {

 constructor(props) {
 super(props);
 this.state = {
   showCamera: true,
};
}

  renderCamera = () => {
if(this.state.showCamera) {
  return (
    <Camera
      ref={(cam) => {
        this.camera = cam;
      }}
      style={styles.container}
      aspect={Camera.constants.Aspect.fill}
      onBarCodeRead={this._onBarCodeRead}>

    </Camera>
  );
} 
  }

 render() {
  return (
   this.renderCamera()
  );
}

 _onBarCodeRead = (e) => {
  this.setState({showCamera: false});
  alert("Barcode is  " +e.data);

 }
 }

    const styles = StyleSheet.create({
   container: {
    flex: 1,
  justifyContent: "center",
  alignItems: "center",
   backgroundColor: "transparent",
  },
  });

请问您有什么想法吗?我该如何使用本机相机做到这一点?

0 个答案:

没有答案