react-native-ycd-qrcode v1.0.1

react-native-ycd-qrcode 说明

安装: npm install react-native-ycd-qrcode -save npm install react-native-camera -save

react-native link react-native-camera

ios:

• 1 Info.plist 文件 增加key

    <key>NSCameraUsageDescription</key>
        <string>cameraDesciption</string>
    <key>NSMicrophoneUsageDescription</key>
        <string>microphoneDesciption</string>
    <key>NSPhotoLibraryUsageDescription</key>
        <string>photoLibraryDesciption</string>
    <key>NSAppTransportSecurity</key>

js使用:

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

import QRCode from "react-native-ycd-qrcode";

export default class YcdProject extends Component {
　//解析数据
  parseData(pdata){

    if (this.camera) {
        this.camera._removeOnBarCodeReadListener();
        this.camera.stopCapture();
        this.setState({
          isRecording: false
        });
        console.log(pdata);
        alert(pdata.data);
    }
  }
  
  constructor(props) {
    super(props);

    this.camera = null;
  }

  render() {
    let scanArea = null
    scanArea = (
        <View style={styles.rectangleContainer}>
          <View style={styles.rectangle} />
        </View>
    )

    return (
    <QRCode
      ref={(cam) => {
            this.camera = cam;
          }}
      onBarCodeRead={ this.parseData.bind(this)}
      style={styles.camera}>
      {scanArea}
    </QRCode>
    );
  }
}

const styles = StyleSheet.create({
  camera: {
    flex: 1
  },
  rectangleContainer: {
    flex: 10,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent'
  },
  rectangle: {
    height: 250,
    width: 250,
    borderWidth: 2,
    borderColor: '#00FF00',
    backgroundColor: 'transparent'
  }
});

AppRegistry.registerComponent('YcdProject', () => YcdProject);