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. import Tkinter的时候报错

    在看到图形界面编程的时候,需要导入Tkinter模块,从而在解释器中进行import Tkinter,然后...报错如下: >>> from tkinter import * Tra ...

  2. leetcode:Longest Substring Without Repeating Characters

    Given a string, find the length of the longest substring without repeating characters. For example, ...

  3. 高级正则表达式技术(Python版)

    正则表达式是从信息中搜索特定的模式的一把瑞士军刀.它们是一个巨大的工具库,其中的一些功能经常被忽视或未被充分利用.今天我将向你们展示一些正则表达式的高级用法. 举个例子,这是一个我们可能用来检测电话美 ...

  4. ListView蛮好用

    知识点如下: 1. ListView的基本用法 2. ArrayAdapter和SimpleAdapter的用法 3. OnScrollListener 和 OnItemClickListener 4 ...

  5. asp.net mvc 使用Ajax

    使用asp.net mvc 调用Action方法很简单. 一.无参数方法. 1.首先,引入jquery-1.5.1.min.js 脚本,根据版本不同大家自行选择. <script src=&qu ...

  6. 初识Rest、JSR、JCP、JAX-RS及Jersey

    REST:即表述性状态传递(英文:Representational State Transfer,简称REST)是一种分布式应用的架构风格,也是一种大流量分布式应用的设计方法论. JSR是Java S ...

  7. MapReduce运行时出现java.lang.NoClassDefFoundError

    最近在编写MapReduce程序时遇到了一个错误,错误提示信息为: Error: java.lang.ClassNotFoundException: org.apache.hadoop.hbase.H ...

  8. bzoj3717: [PA2014]Pakowanie

    Time Limit: 90 Sec Memory Limit: 256 MBSubmit: 128 Solved: 43[Submit][Status][Discuss]Description 你有 ...

  9. 【转】类中如何引用server.MapPath()

    转至:http://blog.csdn.net/tangjianft/article/details/5357151 今天在写一个上传图片方法时遇到了两个问题:1.public string getI ...

  10. javascript压缩图片无刷新上传

    首先要说明,该方式我没有实现成功,主要问题点是压缩后能拿到压缩后图片地址,确不知道怎么上传上去,如果有哪位大牛可以指点一二,万分感谢. 图片压缩代码: compress: function(sourc ...