专栏首页程序员的诗和远方React Native 实现二维码扫描

React Native 实现二维码扫描

最近刚好在学习 React Native 想搞个扫描条形码,二维码的小应用,因为涉及硬件接口,而且自己本身并没有原生开发背景,踩了几个坑,记录一下。

扫描二维码

首先当然是 google 一下看看是否有现成的 React Native 库支持二维码,感谢最大的同性交友网站 GitHub,还真有两个:react-native-camerareact-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 版本试试。

还可以用手动链接的方法,参考:

https://github.com/lwansbrough/react-native-camera#manual-install

https://github.com/ideacreation/react-native-barcodescanner#installation

链接好之后,闲话不多说,直接写个 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 加权限的可以参考 [这篇文章]http://www.jianshu.com/p/c212cde86877()

之后让我再给个机会运行一下,同意一堆权限之后,终于看到摄像头画面了,试试扫一扫,还真成功了。

总结

总结一下,这次跌跌撞撞的经历

  • 把库链接好;
  • 把程序的签名弄好;
  • 把该加的权限加号,虽然这里是用 iOS 做例子,可想而知,Android 一样要在 Gradle 文件里面弄一波权限;
  • 了解原生开发很重要

React Native 的哲学是 『Learn once, write anywhere』,实际使用下来,感觉却是『Learn once, and learn others』,也就是常说的『一专多长』。 既要学习 React Native 本身的内容,也要学习 Android,iOS 的知识,不说了,赶快去亚马逊上买本 OC 的书压压惊。

参考

http://stackoverflow.com/questions/26109851/code-signing-is-required-for-product-type-unit-test-bundle-in-sdk-ios-8-0

http://www.jianshu.com/p/c212cde86877

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 搭建安卓开发环境(Android Studio)

    最近想用业余时间学习一下android,教程,书本上以eclipse+adt居多,实际搜索一下,现在android studio好评还是比较多的,而且是goo...

    Bob.Chen
  • 20181118_ARTS_week21

    这题一开始一直没思路,然后看了 leetcode 的讨论,这个解法还是比较精妙的,用两个指针,然后距离就是 n,等到最后一个碰到末尾,要踢掉的元素就是 前一个指...

    Bob.Chen
  • 使用compass自动拼css sprite

    css sprite (css 雪碧)又叫css精灵,是一种图片拼合技术。多用在图标上,把几个图标拼成一个图片,页面加载的时候只需要load拼好的图片,然后使用...

    Bob.Chen
  • React Native学习资源全家桶

    目前网络上已经存在几个汇总的资源,已经汇总了很多优秀文章、控件和开源APP。先分享下目前存在的汇总资源。star数量是截至2017-11-07的数量。

    forrest23
  • 索尼与微软建立战略合作伙伴关系,致力于云解决方案与人工智能

    索尼公司和微软公司宣布,两家公司将合作开展新的创新,以增强其直接面向消费者的娱乐平台和人工智能解决方案带来的客户体验。

    AiTechYun
  • react-native首次运行项目

    这两天一直在看react。今天正好想着安装 react-native ,看看传说中的用JS写APP能用嘛。

    魔王卷子
  • windows环境里React-Native运行失败的原因之一,缺少依赖

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang
  • 现有Android项目引入ReactNative--九步大法

    为什么写这篇文章,因为很多时候我们是需要在原Android工程中添加ReactNative,而不是直接react-native init hello来创建工程,...

    先知先觉
  • (转)JAVA HashSet 去除重复值原理

    Java中的set是一个不包含重复元素的集合,确切地说,是不包含e1.equals(e2)的元素对。Set中允许添加null。Set不能保证集合里元素的顺序。

    Dar_Alpha
  • 通过 Consul+OpenResty 实现无reload动态负载均衡

    【转载请注明出处】:https://cloud.tencent.com/developer/article/1628590

    后端老鸟

扫码关注云+社区

领取腾讯云代金券