1.前言
今天介绍React Native来实现二维码扫描的功能。首先我们要借助第三方插件react-native-barcode-scanner-universal来实现跨平台二维码扫描。

2.介绍

react-native-barcode-scanner-universal

react-native-barcode-scanner-universalreact-native-barcodescannerreact-native-camera的结合,react-native-barcodescanner应用于android平台,react-native-camera应用于iOS平台。

3.使用实例

1)安装:npm install  react-native-barcode-scanner-universal --save

2) 关联native库:react-native-barcodescanner 和 react-native-camera

which rnpm || npm install -g rnpm
rnpm link react-native-camera
rnpm link react-native-barcodescanner

3)可以手动关联,建议用第2步自动关联。手动关联参考:

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

4)关联成功后,需要修改Android工程下的MainApplication.java代码

import com.eguma.barcodescanner.BarcodeScannerPackage;//导入
public class MainApplication extends Application implements ReactApplication {
// (...) @Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new BarcodeScannerPackage() // add this statement
);
}
}

5) react native中使用

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native'; import BarcodeScanner from 'react-native-barcode-scanner-universal' export default class qrcode extends Component {
 //解析数据
parseData(pdata){
var ptype = pdata.type;
var data = pdata.data; fetch(data)
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
})
.catch((error) => {
console.error(error);
});
} render() {
let scanArea = null
scanArea = (
<View style={styles.rectangleContainer}>
<View style={styles.rectangle} />
</View>
) return (
<BarcodeScanner
onBarCodeRead={ this.parseData.bind(this) }
style={styles.camera}
>
{scanArea}
</BarcodeScanner>
);
}
} const 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'
}
});

4.效果

扫描成功后打印的数据

【React Native 实战】二维码扫描的更多相关文章

  1. React Native 二维码扫描组件

    学rn得朋友们,你们知道rn开源项目吗?来吧看这里:http://www.marno.cn/(rn开源项目) React Native学习之路(9) - 注册登录验证的实现 + (用Fetch实现po ...

  2. wex5 实战 二维码生成,扫描,蓝牙打印

    给人设计了一个小模块,要求是,把一个单号生成二维码,实现扫描查询单号具体信息,并能通过蓝牙把二维码打印出来.功能实现并不复杂,今天一口气把它搞定.来看效果. 一   效果演示: 二.二维码生成 1 在 ...

  3. Android之条形码、二维码扫描框架(非原创)

    文章大纲 一.条形码.二维码扫描框架介绍二.条形码.二维码的区别和组成结构介绍三.条形码.二维码扫描框架应用场景四.BGAQRCode-Android框架实战五.项目源码下载六.参考文章 一.条形码. ...

  4. XAMARIN ANDROID 二维码扫描示例

    现在二维码的应用越来越普及,二维码扫描也成为手机应用程序的必备功能了.本文将基于 Xamarin.Android 平台使用 ZXing.Net.Mobile  做一个简单的 Android 条码扫描示 ...

  5. [Unity3D]自制UnityForAndroid二维码扫描插件

    一周左右终于将二维码生成和扫描功能给实现了,终于能舒缓一口气了,从一开始的疑惑为啥不同的扫码客户端为啥扫出来的效果不同?通用的扫描器扫出来就是一个下载APK,自制的扫描器扫出来是想要的有效信息,然后分 ...

  6. 有关iOS系统中调用相机设备实现二维码扫描功能的注意点(3/3)

    今天我们接着聊聊iOS系统实现二维码扫描的其他注意点. 大家还记得前面我们用到的输出数据的类对象吗?AVCaptureMetadataOutput,就是它!如果我们需要实现目前主流APP扫描二维码的功 ...

  7. Android仿微信二维码扫描

    转载:http://blog.csdn.net/xiaanming/article/details/10163203 了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一 ...

  8. Android—ZXing二维码扫描遇到的问题

    最近工作中需要开发带有二维码扫描功能的软件(基于开源项目ZXing),遇到的问题记录一下,也希望给大家带来帮助. 1.首先因为扫描要开摄像机所以加权限是一定的,不然后面什么都不能进行 <uses ...

  9. Ios二维码扫描(系统自带的二维码扫描)

    Ios二维码扫描 这里给大家介绍的时如何使用系统自带的二维码扫描方法和一些简单的动画! 操作步骤: 1).首先你需要搭建UI界面如图:下图我用了俩个imageview和一个label 2).你需要在你 ...

随机推荐

  1. 三角剖分求多边形面积的交 HDU3060

    //三角剖分求多边形面积的交 HDU3060 #include <iostream> #include <cstdio> #include <cstring> #i ...

  2. FILETIME, SYSTEMTIME 与 time_t 相互转换

    FILETIME, SYSTEMTIME 与 time_t 相互转换 2009-08-24 15:37:14|  分类: 默认分类|举报|字号 订阅     //******************* ...

  3. flex之组件简单应用

    1. 将父窗体的内容传递给子窗体: 2.将子窗体内容传递给父窗体:即用户名和密码,t1是父窗体文本框id.

  4. mysql 中时间和日期函数应用

    一.MySQL 获得当前日期时间 函数 1.1 获得当前日期+时间(date + time)函数:now() mysql> select now(); +-------------------- ...

  5. Chapter 6 Windows下编译pycaffe

    pycaffe 是 Caffe 提供的Python接口,我们知道 Caffe 的整个framework是基于C Plus Plus 来开发的,所以pycaffe 的根本就是提供Python调用Caff ...

  6. jszs 历史管理

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. onAttachedToWindow()在整个Activity生命周期的位置及使用

    onAttachedToWindow在整个Activity的生命周期中占据什么位置? 为什么要在onAttachedToWindow中修改窗口尺寸? 一.onAttachedToWindow在Acti ...

  8. C语言中返回字符串函数的四种实现方法 2015-05-17 15:00 23人阅读 评论(0) 收藏

    C语言中返回字符串函数的四种实现方法 分类: UNIX/LINUX C/C++ 2010-12-29 02:54 11954人阅读 评论(1) 收藏 举报 语言func存储 有四种方式: 1.使用堆空 ...

  9. C++11角括号

    [C++11角括号] 标准 C++ 的剖析器一律将 ">>" 视为右移运算符. 但在样板定义式中,绝大多数的场合其实都代表两个连续右角括号. 为了避免剖析器误判,撰码时 ...

  10. spring 解析配置文件问题

    问题描述 2014-02-25 16:39:36.068 [com.mchange.v2.async.ThreadPoolAsynchronousRunner$PoolThread-#2] WARN ...