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…