我選擇了react-native-camera，地址：https://www.npmjs.com/package/react-native-camera
我這里用盡量簡(jiǎn)單的配置和使用方式來(lái)感受react-native-camera

一

在package.json 里的dependencies內(nèi)加：

"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:
以下代碼有則不需要改動(dòng)，無(wú)則添加，我在link后是已經(jīng)自動(dòng)生成了的。

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

四

android/app/build.gradle:
這里原來(lái)自動(dòng)生成的是這樣的

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

按照文檔說(shuō)的改成了：

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里添加如下語(yǔ)句，注意順序

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

我的完成結(jié)構(gòu)：

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:
檢查無(wú)則添加，我在link后已存在

import org.reactnative.camera.RNCameraPackage;

new RNCameraPackage()  //asList內(nèi)添加

有些人會(huì)不太知道位置，這里是我的完成效果：

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 })
      //當(dāng)條形碼變化時(shí)保存當(dāng)前條形碼，并關(guān)閉掃碼
    }
  }

  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>結(jié)果：{this.state.code}</Text>
          </View>
        }
      </View>
    )
  }

掃條形碼得到的是一串?dāng)?shù)字編號(hào)，
我的實(shí)際使用里是利用這個(gè)數(shù)字編號(hào)去數(shù)據(jù)庫(kù)查詢(xún)產(chǎn)品信息，并做一些記錄和操作。
掃二維碼一般是一個(gè)鏈接。
<Camera>在這里你可以寫(xiě)上你想要的樣式，例如掃描線的動(dòng)畫(huà)效果</Camera>