使用 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…