使用 react-native-smart-barcode 实现 react-native 二维码扫描功能

最近在整理一个生成二维码与识别二维码的Demo，在扫描这个功能上查找了不少主流的库，可是大多数库由于年代久远，新版的Xcode连Demo都没办法跑起来了，因此我整理了一下使用 react-native-smart-barcode 实现二维码扫描的功能。

react-native 版本号： 0.59.8

这里首先感谢 github.com/yxwandroid/… 提供的一些帮助。

使用的开源库

react-native-smart-barcode

react-native-smart-timer-enhance

安装

npm install react-native-smart-barcode --save
    npm install react-native-smart-timer-enhance --save
复制代码

Ios 配置

1. 添加 RCTBarCode.xcodeproj 到项目中

右键点击 Libraries 选择 Add file to "your project name"

将 \node_modules\react-native-smart-barcode\ios\RCTBarcode\RCTBarCode.xcodeproj 添加到Xcode项目中。

2. 添加依赖

1. 双击项目

2. 找到 Libraries -> RCTBarCode.xcodeproj -> Products -> libRCTBarcode.a

3. 将 libRCTBarcode.a 拖拽到 Build Phases -> Link Binary With Libraries

3. 设置 Header Search Paths

1. 双击 RCTBarCode.xcodeproj

2. 选择 Build Settings 选项

3. 找到 Search Paths -> 双击查看是否有 $(SRCROOT)/../../../react-native/React 若是没有将 $(SRCROOT)/../../../react-native/React 添加进去并选择 recursive （如图步骤3所示, 若是设置过则不须要重复设置

5. 添加 Raw 文件夹

1. 将 node_modules\react-native-smart-barcode\ios\raw 拖拽到 项目中 （如图所示）

6. 添加 相机使用权限

1. 点击加号选取 Privacy - camera Usage Description (请按照提示选取，最好不要手动输入)

2. 选取后便可在列表中看到增长的相机使用权限

Android 配置

Android的配置较为复杂，须要你对代码进行修改，若是修改后发现没法运行，请按照文档仔细阅读，查看是否遗漏了某一步骤。

1. 修改 settings.gradle 文件

...
include ':react-native-smart-barcode'
project(':react-native-smart-barcode').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smart-barcode/android')
复制代码

2. 修改 build.gradle 文件

修改 你的项目/android/app/build.gradle 文件，增长如下语句，位置如图所示

compile project(':react-native-smart-barcode') 复制代码

3. 修改 MainApplication.java 文件

修改 你的项目/android/app/src/main/com/你的项目名称/MainApplication.java

1. 增长

import com.reactnativecomponent.barcode.RCTCapturePackage;
复制代码

2. 注释愿语句 增长

private ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
复制代码

3. 增长 注意这里使用,做为间隔

new RCTCapturePackage()
复制代码

4. 增长

public void setReactNativeHost(ReactNativeHost reactNativeHost) {
    mReactNativeHost = reactNativeHost;
  }
复制代码

4. 增长相机权限

编辑 你的项目/android/app/src/AndroidManifest.xml 文件

增长

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<uses-feature android:name="android.hardware.camera"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>
复制代码

5. 更改 propTypes

由于新版的 ReactNative 去除了 propTypes 因此咱们须要手动安装引入 prop-types 库

若是你本地没有 prop-types 库 那么你能够手动安装它

npm install prop-types --save
复制代码

或者

yarn add prop-types 
复制代码

首先找到 Barcode.js 文件 目录位置 node_modules/react-native-smart-barcode/Barcode.js 按照图片所示修改文件保存便可。

运行结果

当你在模拟器看到如图所示的界面，那么恭喜你，你已经成功完成这一功能，ReactNative代码能够经过 index.js 查看

注：Ios黑屏为正常状况，真机模拟能够查看，Android黑屏极大多是由于未受权软件相机权限，能够到设置中设计权限便可。
复制代码

更换 App 图标

Android

Android 能够在 你的项目/android/src/main/res 下 替换 mipmap-xxxx 文件中的图便可，尺寸为 （48x48,72x72,96x96,144x144,192*192）

Ios

Ios 能够在 Xcode中 找到 images.xcassets 而后将图标拖拽到不一样的位置便可。（注意尺寸要与Xcode提供的尺寸大小相符）

常见问题

1. @Override

遇到 @Override 报错， 找到报错位置 删除 @Override便可

2. node-xxxx xxxxx link

找到 node_modules 下的该目录，删除该目录便可。

3. Proptypes error

报错包含 proptypes 通常都是由于 新版本的react-native 去除了 Proptypes 而 react-native-smart-barcode 没有进行更新，按照Android第五步操做便可。

若是遇到其余问题，欢迎给我留言。

gitHub: github.com/zmh3788/Sca…