React Native 實現二維碼掃描

最近恰好在學習 React Native 想搞個掃描條形碼，二維碼的小應用，由於涉及硬件接口，並且本身自己並無原生開發背景，踩了幾個坑，記錄一下。

掃描二維碼

首先固然是 google 一下看看是否有現成的 React Native 庫支持二維碼，感謝最大的同性交友網站 GitHub，還真有兩個：react-native-camera 和 react-native-barcodescanner 。

不過，各自都有一點問題，react-native-camera 主要是用來調用攝像頭的，Android iOS 均可以用，可是識別條形碼的功能只有 iOS 有，而react-native-barcodescanner 直接只支持 Android。因而爲了方便，有人把這兩個庫搞到一塊兒，弄了個 react-native-barcode-scanner-universal 。裏面代碼也比較簡單，就是利用 React Native 根據不一樣平臺會去讀 xxx.ios.js 或者 xxx.android.js 的原理，寫一個公共的 index.js 而後分別調用不一樣平臺的庫。

// index.js
module.exports = require("./BarcodeScanner");

// BarcodeScanner.android.js
import BarcodeScanner from "react-native-barcodescanner";
module.exports = BarcodeScanner;

// BarcodeScanner.ios.js
import Camera from "react-native-camera";
module.exports = Camera;複製代碼

既然都打包好了，那咱們就開始用 react-native-barcode-scanner-universal 這個庫吧。

既然是要調用硬件 API，那確定有原生代碼在裏面，須要把原生模塊給連接到相應的原生項目中。

這裏既能夠手動，又可使用一個叫 rnpm 的工具。

---

rnpm 的全名是『React Native Package Manager』，高大上有木有，主要就是用來把一些 React Native 庫中用到的原生模塊給添加到相應的原生項目中。

安裝比較簡單：

npm install -g rnpm複製代碼

連接：

rnpm link react-native-camera
rnpm link react-native-barcodescanner複製代碼

這個最新版是 1.9.0，不過我連接的時候老是提示各類奇怪的問題，因而查了下，改爲 1.5.5 版本就行了，若是你遇到新版報錯有問題，能夠嘗試退到 1.5.5 版本試試。

還能夠用手動連接的方法，參考：

github.com/lwansbrough…

github.com/ideacreatio…

連接好以後，閒話很少說，直接寫個 View 開搞，這裏以 iOS 爲主。

import BarcodeScanner from 'react-native-barcode-scanner-universal'

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Platform
} from 'react-native';

export default class ScanView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            code: "None"
        };
        this._show = this._show.bind(this);
    }

    render() {
        let scanArea = null;
        if (Platform.OS === 'ios') {
            scanArea = (
                <View style={styles.rectangleContainer}> <View style={styles.rectangle} /> </View> ) } return ( <View> <Text style={ [{color:"red"},{fontSize:16}] }>{this.state.code}</Text> <BarcodeScanner onBarCodeRead={ (code) => this._show(code)} style={styles.camera}> {scanArea} </BarcodeScanner> </View> ) } _show(val) { this.setState({ code:val.data }) } } var styles = StyleSheet.create({ camera: { flex: 1 }, rectangleContainer: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'transparent' }, rectangle: { height: 250, width: 250, borderWidth: 2, borderColor: '#00FF00', backgroundColor: 'transparent' } })複製代碼

簡單解釋一下，就是一進來就開始掃，識別到東西就現實到上面的 <Text> 中去。

實際運行一下，因爲要使用攝像頭，這裏電腦要連一個 iOS 設備。我用 Xcode 打開 React Native 工程，設置好使用真機調試。

點下運行按鈕，結果報錯了：Code signing is required for product type 'xxxx' in SDK 'iOS 8.0'

寶寶，沒搞過 iOS，寶寶內心苦。大意是說要什麼什麼簽名，通常這種設置應該都在項目的公共設置裏面吧，因而點了下項目文件，還真有個 Signing，因而添加了一堆東西進去。

再點運行，又報錯了： Code signing is required for product type 'Unit Test Bundle' in SDK 'iOS 8.0'

這單元測試包是啥子，因而 google 一番，原來這個地方是能夠下拉的，沒文化真可怕：

和上面那個同樣，這裏也是設置一番就好。其中要確認 "Code Signing Identity" 這一項不能是 "Don't Code Sign"。

又一次按下運行鍵，此次顯示構建成功，在 iOS 設備上信任了開發證書以後，打開程序，由於我是一打開程序就開始掃描的，因而 Crash 了。

這時候 Xcode 控制檯幽幽的飄出一個錯誤：

簡單來講：由於你想用敏感數據，又沒有事先告訴我，因此我讓你掛了，若是你想不掛，就去 Info.plist 裏面按我說的添加點東西，說說你爲何要用這些數據。

多麼友好的提示啊，因而就按照提示加加加，找到項目的 Info.plist 文件，右鍵選擇 Open As -> Source Code ， 添加它說的東西，裏面的文字就是每次新裝應用彈的框提示要什麼什麼權限的：

這裏順便把訪問照片庫的權限也給加了。關於 iOS 加權限的能夠參考 這篇文章

以後讓我再給個機會運行一下，贊成一堆權限以後，終於看到攝像頭畫面了，試試掃一掃，還真成功了。

掃描條形碼

掃描二維碼

總結

總結一下，此次跌跌撞撞的經歷

• 把庫連接好；
• 把程序的簽名弄好；
• 把該加的權限加號，雖然這裏是用 iOS 作例子，可想而知，Android 同樣要在 Gradle 文件裏面弄一波權限；
• 瞭解原生開發很重要

React Native 的哲學是 『Learn once, write anywhere』，實際使用下來，感受倒是『Learn once, and learn others』，也就是常說的『一專多長』。
既要學習 React Native 自己的內容，也要學習 Android，iOS 的知識，不說了，趕快去亞馬遜上買本 OC 的書壓壓驚。

碎碎念

最近總想記錄一些所思所想，寫寫科技與人文，寫寫生活狀態，寫寫讀書感悟，主要是扯淡和感悟，歡迎關注，交流。

微信公衆號：程序員的詩和遠方

公衆號ID : MonkeyCoder-Life

參考

stackoverflow.com/questions/2…

www.jianshu.com/p/c212cde86…