react-native扫描二维码：react-native-camera

首先先来说明一下今天要解决的问题，那就是在RN的项目中实现扫描二维码的功能，扫码功能为什么要使用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 之后，有几处配置文件已经配置好了，根据以下步骤再确认一下

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

最后编辑于：2019.06.21 16:01:37