首先先來說明一下今天要解決的問題，那就是在RN的項目中實現(xiàn)掃描二維碼的功能，掃碼功能為什么要使用react-native-camera插件呢，它看上去更想是跟相機相關的插件，其實手機掃碼功能本身就是相機提供的一個功能，你可以打開你的手機，對準一個二維碼，它也是可以識別出信息的，我們了解這個情況之后呢，使用這個插件就不足為奇了

安裝

1、npm install react-native-camera --save
2、react-native link react-native-camera

在這里link很可能會失敗，我試了好幾次，沒能成功，接下來進行手動配置：

IOS:

1、導入RNCamera.xcodeproj

在Xcode中打開ios項目看一下Libraries里面有沒有RNCamera.xcodeproj，如果沒有右鍵Libraries->add Files to Demo，在彈出框中選擇RN項目中node_modules->react-native-camera,然后確定

20190618080411242441.png

2、添加libRNCamera.a到Build Phases

展開RNCamera.xcodeproj直接將libRNCamera.a拖入到TARGETS->Demo->Build Phases->Link Binary With Libraries下，這里DemoTests最好也重復一下該步驟

1560849541543.jpg

3、添加相機使用權限

在info.plist中添加相機使用權限"Privacy - Camera Usage Description"，"需要您的同意才能使用相機"

這樣就可以在項目中使用了

Android:

link 之后，有幾處配置文件已經(jīng)配置好了，根據(jù)以下步驟再確認一下

1、android/app/src/main/java/[...]/MainApplication.java

+  import org.reactnative.camera.RNCameraPackage;

    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          +  new RNCameraPackage()
      );
    }

2、android/settings.gradle

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

3、android/app/build.gradle

android {
  ...
  defaultConfig {
    ...
    + missingDimensionStrategy 'react-native-camera', 'general' 
  }
}

dependencies {
   + implementation project(':react-native-camera')
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
}

4、android/build.gradle

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

5、添加相機使用相關權限

<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

由于沒有使用到人臉識別功能，人臉識別的相關配置在這里就不配置了，這里插件要求
buildToolsVersion 25.0.2+ ，我這個demo的相關配置貼出來給大家參考一下

"react-native-camera": "^2.10.2"

ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
        supportLibVersion = "28.0.0"
    }

dependencies {
        classpath 'com.android.tools.build:gradle:3.3.1'
    }

好了，到這里就可以使用二維碼掃描功能了

使用源碼（這里是在gitHub上找的大神分享的demo，覺得對你有幫助的話別忘了給他star哦）：
https://github.com/mrarronz/react-native-blog-examples/tree/master/Chapter12-QRCodeScanGenerate/QRCode