native 实现二维码和条形码扫码

我选择了react-native-camera，地址：https://www.npmjs.com/package/react-native-camera
我这里用尽量简单的配置和使用方式来感受react-native-camera

一

在package.json 里的dependencies内加：

"react-native-camera": "git+https://git@github.com/react-native-community/react-native-camera",

二

npm install
react-native link react-native-camera
android配置:

三

android/settings.gradle:
以下代码有则不需要改动，无则添加，我在link后是已经自动生成了的。

include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir,   '../node_modules/react-native-camera/android')

四

android/app/build.gradle:
这里原来自动生成的是这样的

compile project(':react-native-camera')

按照文档说的改成了：

compile (project(':react-native-camera')) {
        exclude group: "com.google.android.gms"
        compile 'com.android.support:exifinterface:25.+'
        compile ('com.google.android.gms:play-services-vision:12.0.1') {
            force = true
        }
  }

五

android/build.gradle：
在allprojects中repositories里添加如下语句，注意顺序

maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }

我的完成结构：

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven { url "https://jitpack.io" }
        maven { url "https://maven.google.com" }
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

六

MainApplication.java:
检查无则添加，我在link后已存在

import org.reactnative.camera.RNCameraPackage;

new RNCameraPackage()  //asList内添加

有些人会不太知道位置，这里是我的完成效果：

package com.tms_driver;

import android.app.Application;

import com.facebook.react.ReactApplication;
import org.reactnative.camera.RNCameraPackage;     //这里～～～～
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNCameraPackage()   //这里～～～～
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

链接给的文档中还有一些配置，这里我不需要，需要的可以去阅读文档。

接下去就是使用了

引入：

import Camera from 'react-native-camera';   //可扫二维码与条形码

使用：

constructor(props) {
    super(props)
    this.state = {
      open: false,
      code: '',
    }
  }
  componentDidMount(){
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps !== this.props) {

    }
  }
onBarCodeRead(e) {
    if (e.data !== this.code) {
      this.setState({open: false, code: e.data })
      //当条形码变化时保存当前条形码，并关闭扫码
    }
  }

  render() {
    return (
      <View style={styles.container}>
        {
          this.state.open ?
          <Camera
            ref={(cam) => { this.camera = cam }}
            onBarCodeRead={e => this.onBarCodeRead(e)}
            style={styles.preview}
            aspect={Camera.constants.Aspect.fill}
          >

          </Camera>
          :
          <View>
            <TouchableOpacity onPress={() => this.setState({open: true})}>
              <Text>扫一扫</Text>
            </TouchableOpacity>
            <Text>结果：{this.state.code}</Text>
          </View>
        }
      </View>
    )
  }

扫条形码得到的是一串数字编号，
我的实际使用里是利用这个数字编号去数据库查询产品信息，并做一些记录和操作。
扫二维码一般是一个链接。
<Camera>在这里你可以写上你想要的样式，例如扫描线的动画效果</Camera>