Road engineer -React Native full stack of two-dimensional code scanning

Foreword

Previously developed mobile end page, there will always be a native development of various mind, too H5 performance, the animation is not smooth, how can I do as a small front-end of it? No one's always night, silently cry ~

Later, after React Native out, finally emancipated serfs to sing: Ha ha ha, small X native people, waiting for my RN little whip it, pia ~

But then do not understand the point if Android or iOS, complete with RN develop an App, it is very painful.

After the attempt for some time, due to the unbearable tune various unintelligible error, let me once about this new love-hate relationship skills, daunting ~

But recently, as demand on the project and then picked up, suddenly we discovered that we knew, RN This charming little fairy has grown more mature too ~

Well ado, after the saliva clean, let's say something about this topic: How to crack a code of a picture -

Construction of the project

ready

How to read this picture has code is the biggest challenge we have to overcome, but if artificial intelligence based solely on my own brain, I think this question is no solution.

Yes, we need to use a camera, a hand search react-native-camera. . .

Hey I found a mess, really have this library ah. . . Then with the react-native-qrcode-scanner, ah, that's you and me together to save the galaxy it ~

start working

First-party library project root installation, by yarn addcommand installs the appropriate package file

Since the native function will be used, react linkit will be dependent on a variety of operations and automatically added to the native leader packet module.

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

Here we assume that after clicking a small button, then enter the album, there are scanning a two-dimensional graph this code, the page back to the small buttons and pop-up scan content.

One thing to note is: Buttons are two scan pages and album pages, where we react-navigationmanage the routing, see the specific use here .

Take a look at 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 here, react-navigationwill automatically add props to the one navigationproperty, when a similar web development history, a plurality of methods push, pop, replace the like.

Home.js need only one button, you can click to jump to the page 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 is the focus of this

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;

So far, all the work is completed.

explore

Still a lot of trouble is not it? After all, it is necessary to introduce two-party packages, RN future upgrades will not be compatible?

So even if you have given me great benefits, Zhengyilinran my heart is still denied.

And so on, you are heroes wait! ! ! I put the knife on the neck down good that I did not mean teasing you.

No, I show the Chen D must stand out!

Have to say here at Expo , an RN development tool chain, and provides integrated solutions to various problems RN development process, the official website is currently recommended way.

So the second file Scanner.js changed a bit:

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;

Well, complete the. For the crystallization of the wisdom of this, I am quite satisfied, thank you for approving look.

to sum up

Now is the greatest feeling RN, all kinds of equipment to develop more comprehensive, of course, perhaps you did not have in-depth study of this very little understanding of the technology chain.

The entire development experience to enhance more than one grade, let me once again ignited the desire to conquer the heart.

Ha ha ha, small X native people, waiting for my RN little whip it, pia

---