全栈工程师之路-React Native之扫描二维码

前言

以前开发移动端页面,总会被原生开发各种嫌弃,H5性能太低,动画不流畅,身为一名小前端我能怎么办呢?总是在无人的夜里,心里默默地流泪~

后来 React Native 出来以后,终于可以翻身农奴把歌唱:哈哈哈,原生的小X人们,等待我 RN 的小皮鞭吧,pia~

但是那时候若是不懂点 Android 或者 iOS,完全用 RN 开发一个 App,是非常痛苦的。

在尝试一段时间以后,由于实在难以忍受调教各种莫明其妙的报错,让我一度对这项新技能又爱又恨,望而生畏~

但是最近由于项目上的需求又捡了起来,猛然发现,原来不知不觉间,RN 这迷人的小妖精已经成长得越发成熟了~

好了废话不多说,把口水擦干净后,我们先来讲讲本次主题:如何破解一张有码的图片~

项目构建

准备

如何读懂这张有码的图片就是我们要攻克的最大难题了,但是如果单凭我自身大脑的人工智能,我想这问题是无解了。

没错,我们需要用到照相机,随手一搜react-native-camera。。。

咦我是乱搜的,还真有这个库啊。。。再搭配react-native-qrcode-scanner,嗯,就是你了,和我一起拯救银河系吧~

开始工作

首先项目根目录安装三方库,通过yarn add命令安装相应包文件

由于会用到 native 的功能,react link会自动向 native 模块中添加各种依赖和导包的操作。

$ yarn add react-native-camera
$ react-native link react-native-camera
$ yarn add react-native-qrcode-scanner
$ react-native link react-native-qrcode-scanner

这里我们假设点击一个小按钮,然后进入相册,扫描出这张有码的二维图后,回到小按钮页面,并弹出扫描内容。

需要注意的一点是:按钮页和相册扫描是两个页面,这里我们用react-navigation管理路由,具体使用详见这里

先看看App.js:

import React from ‘react‘;
import { StackNavigator } from ‘react-navigation‘;
import Home from ‘./Home‘;
import Scanner from ‘./Scanner‘;

// Home 和 Scanner 是两个页面,点开应用后首先进入 Home
const Stack = StackNavigator({
  Home: {
    screen: Home,
  },
  Scanner: {
    screen: Scanner,
  },
});

export default Stack;

这里的Home,react-navigation自动会往props上加个navigation属性,类似 web 开发时的 history,有 push, pop,replace等多个方法。

Home.js只需要一个按钮,点击跳转至 Scanner 页即可

import React, { Component } from ‘react‘;
import PropTypes from ‘prop-types‘;
import { Button, Toast } from ‘antd-mobile‘;

export default class Home extends Component {

  // react-navigation 的 StackNavigator 会自动在添加组件的 props 上添加 navigation 属性
  static propTypes = {
    navigation: PropTypes.object.isRequired,
  };

  // 点击按钮时触发
  scan = () => {
    this.props.navigation.navigate(‘Scanner‘, {
      onRead: this.onRead
    });
  };

  // 传递给下一个页面的回调函数,显示传入内容
  onRead = (message) => {
    Toast.success(message);
  };

  render() {
    return (
      <Button
        onClick={this.scan}
      >屠龙宝刀,点击就送</Button>
    );
  }
}

Scanner.js 就是本次的重点了

import React, { Component } from ‘react‘;
import QRCodeScanner from ‘react-native-qrcode-scanner‘;

const Scanner = props => {
  const { state, goBack } = props.navigation;

  // onRead 是相机扫描二维码后自动调用,首先返回上一页,然后再调用传入的回调函数,显示扫描内容
  return (
    <QRCodeScanner
      onRead={e => {
        goBack();
        state.params.onRead(e.data);
      }}
    />
  );
}

export Scanner;

至此,所有的工作结束。

探索

依然很麻烦不是么?毕竟需要引入两个三方包呢,未来 RN 升级会不会不兼容?

所以即使已给了我莫大的好处,我正义凛然的内心依然是拒绝的。

等等,大侠您等一等!!!先把我脖子上的刀放下来好好说,我不是故意逗你玩的。

不行,我陈D秀这次一定要站着把话说完!

这里不得不说下Expo,一款 RN 开发的工具链,集成并提供了 RN 开发过程中各种问题的解决方案,也是官网目前推荐方式。

于是第二个文件 Scanner.js 修改一下:

import React, { Component } from ‘react‘;
import { BarCodeScanner, Permissions } from ‘expo‘;

class Scanner extends Component {
  state = {
    hasCameraPermission: null,
  };

  static propTypes = {
    navigation: PropTypes.object.isRequired,
  };

  // 这里首先判定是否拥有相机权限,有我们才能正大光明的调用
  async componentWillMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === ‘granted‘ });
  }

  // 扫描成功自动调用,这里先返回上一页,再调用回调函数,显示扫描内容
  handleBarCodeRead = ({ data }) => {
    const { goBack, state } = this.props.navigation;
    goBack();
    state.params.onRead(data);
  };

  render() {
    const { hasCameraPermission } = this.state;

    // 若无权限,提示用户
    if (hasCameraPermission === null) {
      return <Text>Requesting for camera permission</Text>;
    } else if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    }

    return (
      <View style={{ flex: 1 }}>
        <BarCodeScanner
          onBarCodeRead={this.handleBarCodeRead}
          style={StyleSheet.absoluteFill}
        />
      </View>
    );
  }
}

export default Scanner;

好了,圆满了。对于这智慧的结晶,我还是比较满意的,谢谢大家赞许的目光。

总结

现在使用 RN 最大的感受是,各种开发装备越发全面,当然也或许是之前并未深入学习,对这块的技术链了解太少。

整个开发体验提升不止一个档次,让我再次燃起了内心征服的欲望。

哈哈哈,原生的小X人们,等待着我 RN 的小皮鞭吧,pia


原文地址:https://www.cnblogs.com/qianduanwriter/p/11801574.html

时间: 2024-09-27 21:19:26

全栈工程师之路-React Native之扫描二维码的相关文章

【React Native 实战】二维码扫描

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

买《Java Web全栈工程师之路》专题视频课程送纸质图书

<Java从小白到大牛>上市一年来,取得了比较好的成绩. 为了答谢广大学员对智捷课堂以及关老师的支持,现购买51CTO学院<Java Web全栈工程师之路>专题视频课程的学员送一本<Java从小白到大牛>纸质版图书.请于购买课程后10个工作日内申请赠书,过期视为放弃.注意:苹果支付购买,以及8折(含8折)一下活动购买不赠送图书.领取说明:加qq群:51CTO-关老师付费群 523714201 验证消息:用户名+订单号即可通过. 最好您在购买之前咨询客服人员,以免不符合赠

“全栈2019”Java第三十一章:二维数组和多维数组详解

难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第三十一章:二维数组和多维数组详解 下一章 "全栈2019"Java第三十二章:增强for循环Foreach语法 学习小组 加入同步学习小组,共同交流与进步. 方式一:关注头条号Gorhaf,私信"Java学习小组". 方式二:关注公众号Gorhaf,回复"Ja

通往全栈工程师的捷径 —— React

下图是 React 在国内的百度搜索指数,是拿 React 和 Nodejs 做了个对比,可以看出 React 的关注度也已经逼近 nodejs. 虽然在关注总量上 React 还远不及 jQuery 和 Angular 等等,但它的增长幅度超乎你想象,你知道这意味着什么吗?这意味着关注 React,你就比大多数人走在了业界的前沿! 一.什么是react 引用官网的简介,react就是”一个用来构建用户界面的 javascript 库”. React 起源于 Facebook 的内部项目,因为

技术栈选择与全栈工程师

很多朋友的第一门语言是一个强类型语言.可能是C/C++/Java/C#. 做到一定年份了,积累了丰富的经验,发现自己好像大多数东西能做,客户端.服务端.手机.游戏,很多场景自己都可以进行开发. 在各种场景下都能开发. 在各种场景下都遇到有力的竞争对手. 竞争对手貌似不少人比自己开发效率高. 类似这样的技术人员,我们可以称之为C蛮. ---------------- C蛮和队长的故事 -------------- C蛮浑身肌肉,手持精金巨斧. 无论看到什么怪物,嗷呜一声吼.狂暴+吹大+高等魔化武器

CSDN日报20170329 ——《“全栈”工程师 请不要随意去做》

[程序人生]"全栈"工程师 请不要随意去做 作者:郭小北 很简单就是最近越来越多的人想做[全栈工程师],他们的目标就是全栈,他们才入行短短1-2年,甚至刚从培训班出来:我的目标是做全栈,我啥都要学会,啥都会写,这样我就是大牛了,可以挣大钱,就算创业,我也不用招那么多人,一个人搞定一个产品,融资上市 ,CEO 白富美,balabala... [Web 前端]关于 PWA 落地问题的思考 作者:Horky PWA 是最近一个热门话题,很多开发同学都在尝试落地,其中也有些还在犹豫.这篇文章主

努力成长为一只全栈工程师

完全转到互联网行业来之后,就一直在读书,内容都是计算机领域的,除了读书还看视频,是关于计算机基础理论课的,应用方面的就不看视频了,太贫太慢,不如文档来得快.看书也尽量挑进阶一点的,比如书名包含“性能”.“进阶”.“设计模式”.“算法”,其实这些对一个互联网领域的熟练工来说,应该也是标配了.看这些书的目的就是为了让自己更专业,能够解决更多的问题,写代码写得更明白. 换到新公司这几个月以来,除了觉得自己要恶补知识之外,有两点让自己非常庆幸,一是原来在大公司的经历让自己已经足够职业了,清楚地知道工作对

2019年如何成为全栈工程师?

2019年到了,每个前端工程师都有一颗全栈的心,很多读者私信我,怎么才能晋升为全栈工程师.这里给大家解答一下大概路线. 随着前端能做的事情越来越多,前端的知识体系也越来越复杂,面对密集的知识点,一口气吃不成胖子的,所以,制定好一个合理的学习路线是必不可少的了. 1. 前端 万丈高楼平地起,学习前端也是一样,没有基础知识做地基,Html/Css/JavaScript自不必说,重中之重,务必得学的扎实. 选择框架的确很难以抉择,React用户量遥遥领先,一定是极好的,但是,我建议大家选择Vue,更快

全栈工程师?

作者:肖文峰链接:https://zhuanlan.zhihu.com/p/20091607来源:知乎 最近参加一个技术社区活动,在讨论到"CTO的技术深度和广度哪个更重要"的话题时,我想起社区里面常常提到的"全栈工程师"的事情,于是表达了一些观点.临场未必能够清晰表达,所以下笔,希望能够引起一些讨论,避免年轻工程师误入歧途. 长期以来,社区就有人在提"全栈工程师",还有一些公司直接挂出名为"全栈工程师"的招聘职位.那什么是全