React Native 实现二维码扫描

React Native 实现二维码扫描

标签（空格分隔）： React

---

该方式可实现安卓、IOS同时可用

1 安装react-native-camera

react-native-camera

运行以下命令来安装react-native-camera

npm install react-native-camera@https://github.com/lwansbrough/react-native-camera.git --save

链接

react-native link react-native-camera

2.将QRCodeScreen.js放到项目中

QRCodeScreen.js

'use strict';

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

import Camera from 'react-native-camera';

var QRCodeScreen = React.createClass({

  propTypes: {
    cancelButtonVisible: React.PropTypes.bool,
    cancelButtonTitle: React.PropTypes.string,
    onSucess: React.PropTypes.func,
    onCancel: React.PropTypes.func,
  },

  getDefaultProps: function() {
    return {
      cancelButtonVisible: false,
      cancelButtonTitle: 'Cancel',
    };
  },

  _onPressCancel: function() {
    var $this = this;
    requestAnimationFrame(function() {
      $this.props.navigator.pop();
      if ($this.props.onCancel) {
        $this.props.onCancel();
      }
    });
  },

  _onBarCodeRead: function(result) {
    var $this = this;

    if (this.barCodeFlag) {
      this.barCodeFlag = false;

      setTimeout(function() {
        VibrationIOS.vibrate();
        $this.props.navigator.pop();
        $this.props.onSucess(result.data);
      }, 1000);
    }
  },

  render: function() {
    var cancelButton = null;
    this.barCodeFlag = true;
    
    if (this.props.cancelButtonVisible) {
      cancelButton = ;
    }

    return (
      
        
          
        
        {cancelButton}
      
    );
  },
});

var CancelButton = React.createClass({
  render: function() {
    return (
      
        
          {this.props.title}
        
      
    );
  },
});

var styles = StyleSheet.create({

  camera: {
    height: 568,
    alignItems: 'center',
  },

  rectangleContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
  },

  rectangle: {
    height: 250,
    width: 250,
    borderWidth: 2,
    borderColor: '#00FF00',
    backgroundColor: 'transparent',
  },

  cancelButton: {
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: 'white',
    borderRadius: 3,
    padding: 15,
    width: 100,
    bottom: 10,
  },
  cancelButtonText: {
    fontSize: 17,
    fontWeight: '500',
    color: '#0097CE',
  },
});

module.exports = QRCodeScreen;

3.在index.ios.js文件中

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

var QRCodeScreen = require('./QRCodeScreen');

export default class camera extends Component {
  render() {
    return (
      
    );
  }
}

var Index = React.createClass({

  render: function() {
    return (
      
        
          Read QRCode
        
      
    );
  },

  _onPressQRCode: function() {
    this.props.navigator.push({
      component: QRCodeScreen,
      title: 'QRCode',
      passProps: {
        onSucess: this._onSucess,
      },
    });
  },

  _onSucess: function(result) {
    console.log(result);
  },

});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }
});

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

由于IOS中对于用户的隐私权限比较严格，所以，IOS需要在info.plist文件中加入以下配置

NSCameraUsageDescription    
cameraDesciption

NSContactsUsageDescription    
contactsDesciption

NSMicrophoneUsageDescription    
microphoneDesciption

index.android.js和index.ios.js相同

参考文档:

react-native-qrcode-reader

iOS 10 开发适配系列 之 权限Crash问题

React Native 实现二维码扫描（该方法的Example例子运行没有问题，但是在自己项目中集成的时候发现安卓不调用摄像头）