RN常用组件之二维码识别

在项目中遇到了扫描二维码的需求,在网上找了一圈，发现这个组件很好用，目前已经加入到项目中了，表现还是可以的。下面说的这个组件的配置和基本使用。

安装配置

install

1	npm i --save react-native-barcodescanner

link

//In android/settings.gradle
...
include ':react-native-barcodescanner', ':app'
project(':react-native-barcodescanner').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-barcodescanner/android')

//In android/app/build.gradle
...
dependencies {
...
compile project(':react-native-barcodescanner')
}

register

import com.eguma.barcodescanner.BarcodeScannerPackage;
...
public class MainApplication extends Application implements ReactApplication {
    ...

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new BarcodeScannerPackage()//在这里添加注册
      );
    }
}

然后rebuild项目就可以使用组件了。

具体使用方法

import React, {
  AppRegistry,
  Component,
} from 'react-native';
import BarcodeScanner from 'react-native-barcodescanner';

class BarcodeScannerApp extends Component {
  constructor(props) {
    super(props);

    this.state = {
      torchMode: 'off',
      cameraType: 'back',
    };
  }

  barcodeReceived(e) {
    console.log('Barcode: ' + e.data);
    console.log('Type: ' + e.type);
  }

  render() {
    return (
      <BarcodeScanner
        onBarCodeRead={this.barcodeReceived}
        style={{ flex: 1 }}
        torchMode={this.state.torchMode}
        cameraType={this.state.cameraType}
      />
    );
  }
}

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

ok，将上面代码复制到index.js跑起来试试吧~