首先先来说明一下今天要解决的问题，那就是在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
网友评论