Aplikace pro skenování QR kódů pomocí nativní React

QR kód je oblíbený díky své velké úložné kapacitě a schopnosti okamžité čitelnosti. V současné době většina aplikací používá QR kódy pro identifikaci zboží, sledování a dokonce i marketing.

Začínáme

Několik aplikací pro skenování QR kódů skenuje produkty v supermarketech, čte identifikační čísla z pasů a odečítá registrační značku vozidla. Poskytuje snadný způsob, jak rozpoznat produkty namísto zadávání dlouhých 16 číslic z čárových kódů.

React-Native má balíček npm s otevřeným zdrojovým kódem nazvaný reakt-native-qrcode-scanner pro provádění skenování QR kódu. Následuje seznam zásuvných modulů pro skenování a funkcí, které můžete implementovat pomocí React-native.

  • react-native-qrcode-scanner
  • react-native-scan-view
  • react-native-camera

Myšlenkou tohoto článku je vyvinout aplikaci pro skenování QR kódu pomocí nativního Reactu.

Krok 1:Vytvořte svůj projekt v nativním prostředí reakce

Pojďme vytvořit projekt v reakce nativní.

Pokud jste v reagování nativních novinek, můžete si prolétnout následující článek, abyste se dostali do kontaktu se závislostmi a nastavením prostředí reaktantu spolu s ukázkou aplikace hello world.

Vyvíjejte aplikaci hello world v React native

Otevřete terminál a spusťte níže uvedené příkazy k vytvoření nativního projektu reakce.

create-react-native-app qrcode-scanner-app
cd qrcode-scanner-app 
react-native run-android

Krok 2:Přidejte své závislosti

Nainstalujte do projektu závislosti skenování QRCode.

yarn add react-native-camera@git+https://[email protected]/react-native-community/react-native-camera.git
yarn add react-native-qrcode-scanner

Chcete-li použít react-native-qrcode-scanner , importujte modul a použijte <QRCodeScanner /> tag ve vaší komponentě.

Krok 3:Přidání oprávnění

Chcete-li získat přístup k fotoaparátu, přidejte do souboru AndroidManifest.xml následující kód.

<uses-permission android:name="android.permission.CAMERA" />

Krok 4:Implementace skeneru QR Code

Abychom mohli zavolat metodu QRCode, vytvořte krásný pohled kliknutím na tlačítko zachycení. Vytvoříme komponentu nazvanou Skenovat pro skenování QR kódu pomocí reakt-nativního-qrcode-scanneru

scan.js

import React, { Component, Fragment } from 'react';
import { TouchableOpacity, Text, Linking, View, Image, ImageBackground, BackHandler } from 'react-native';
import QRCodeScanner from 'react-native-qrcode-scanner';
import styles from './scanStyle';
class Scan extends Component {
    constructor(props) {
        super(props);
        this.state = {
            scan: false,
            ScanResult: false,
            result: null
        };
    }
    onSuccess = (e) => {
        const check = e.data.substring(0, 4);
        console.log('scanned data' + check);
        this.setState({
            result: e,
            scan: false,
            ScanResult: true
        })
        if (check === 'http') {
            Linking.openURL(e.data).catch(err => console.error('An error occured', err));
        } else {
            this.setState({
                result: e,
                scan: false,
                ScanResult: true
            })
        }
    }
    activeQR = () => {
        this.setState({ scan: true })
    }
    scanAgain = () => {
        this.setState({ scan: true, ScanResult: false })
    }
    render() {
        const { scan, ScanResult, result } = this.state
        return (
            <View style={styles.scrollViewStyle}>
                <Fragment>
                    <View style={styles.header}>
                        <TouchableOpacity onPress={()=> BackHandler.exitApp()}>
                            <Image source={require('./assets/back.png')} style={{height: 36, width: 36}}></Image>
                        </TouchableOpacity>
                        <Text style={styles.textTitle}>Scan QR Code</Text>
                    </View>
                    {!scan && !ScanResult &&
                        <View style={styles.cardView} >
                            <Image source={require('./assets/camera.png')} style={{height: 36, width: 36}}></Image>
                            <Text numberOfLines={8} style={styles.descText}>Please move your camera {"\n"} over the QR Code</Text>
                            <Image source={require('./assets/qr-code.png')} style={{margin: 20}}></Image>
                            <TouchableOpacity onPress={this.activeQR} style={styles.buttonScan}>
                                <View style={styles.buttonWrapper}>
                                <Image source={require('./assets/camera.png')} style={{height: 36, width: 36}}></Image>
                                <Text style={{...styles.buttonTextStyle, color: '#2196f3'}}>Scan QR Code</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    }
                    {ScanResult &&
                        <Fragment>
                            <Text style={styles.textTitle1}>Result</Text>
                            <View style={ScanResult ? styles.scanCardView : styles.cardView}>
                                <Text>Type : {result.type}</Text>
                                <Text>Result : {result.data}</Text>
                                <Text numberOfLines={1}>RawData: {result.rawData}</Text>
                                <TouchableOpacity onPress={this.scanAgain} style={styles.buttonScan}>
                                    <View style={styles.buttonWrapper}>
                                        <Image source={require('./assets/camera.png')} style={{height: 36, width: 36}}></Image>
                                        <Text style={{...styles.buttonTextStyle, color: '#2196f3'}}>Click to scan again</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </Fragment>
                    }
                    {scan &&
                        <QRCodeScanner
                            reactivate={true}
                            showMarker={true}
                            ref={(node) => { this.scanner = node }}
                            onRead={this.onSuccess}
                            topContent={
                                <Text style={styles.centerText}>
                                   Please move your camera {"\n"} over the QR Code
                                </Text>
                            }
                            bottomContent={
                                <View>
                                    <ImageBackground source={require('./assets/bottom-panel.png')} style={styles.bottomContent}>
                                        <TouchableOpacity style={styles.buttonScan2} 
                                            onPress={() => this.scanner.reactivate()} 
                                            onLongPress={() => this.setState({ scan: false })}>
                                            <Image source={require('./assets/camera2.png')}></Image>
                                        </TouchableOpacity>
                                    </ImageBackground>
                                </View>
                            }
                        />
                    }
                </Fragment>
            </View>
        );
    }
}
export default Scan;

scanStyle.js

import React, { Component } from 'react'
import { Dimensions } from 'react-native';
const deviceWidth = Dimensions.get('screen').width;
const deviceHeight = Dimensions.get('screen').height;
const styles = {
    scrollViewStyle: {
        flex: 1,
        justifyContent: 'flex-start',
        backgroundColor: '#2196f3'
    },
    header: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        height: '10%',
        paddingLeft: 15,
        paddingTop: 10,
        width: deviceWidth,
    },
    textTitle: {
        fontWeight: 'bold',
        fontSize: 18,
        textAlign: 'center',
        padding: 16,
        color: 'white'
    },
    textTitle1: {
        fontWeight: 'bold',
        fontSize: 18,
        textAlign: 'center',
        padding: 16,
        color: 'white'
    },
    cardView: {
        width: deviceWidth - 32,
        height: deviceHeight - 350,
        alignSelf: 'center',
        justifyContent: 'flex-start',
        alignItems: 'center',
        borderRadius: 10,
        padding: 25,
        marginLeft: 5,
        marginRight: 5,
        marginTop: '10%',
        backgroundColor: 'white'
    },
    scanCardView: {
        width: deviceWidth - 32,
        height: deviceHeight / 2,
        alignSelf: 'center',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,
        padding: 25,
        marginLeft: 5,
        marginRight: 5,
        marginTop: 10,
        backgroundColor: 'white'
    },
    buttonWrapper: {
        display: 'flex', 
        flexDirection: 'row',
        alignItems: 'center'
    },
    buttonScan: {
        borderWidth: 2,
        borderRadius: 10,
        borderColor: '#258ce3',
        paddingTop: 5,
        paddingRight: 25,
        paddingBottom: 5,
        paddingLeft: 25,
        marginTop: 20
    },
    buttonScan2: {
        marginLeft: deviceWidth / 2 - 50,
        width: 100,
        height: 100,
    },
    descText: {
        padding: 16,
        textAlign: 'center',
        fontSize: 16
    },
    highlight: {
        fontWeight: '700',
    },
    centerText: {
        flex: 1,
        textAlign: 'center',
        fontSize: 18,
        padding: 32,
        color: 'white',
    },
    textBold: {
        fontWeight: '500',
        color: '#000',
    },
    bottomContent: {
       width: deviceWidth,
       height: 120,
    },
    buttonTouchable: {
        fontSize: 21,
        backgroundColor: 'white',
        marginTop: 32,
        width: deviceWidth - 62,
        justifyContent: 'center',
        alignItems: 'center',
        height: 44
    },
    buttonTextStyle: {
        color: 'black',
        fontWeight: 'bold',
    }
}
export default styles;

Svažte komponentu skenování v souboru App.js.

import React from 'react';
import Scan from './src/scan';
const App = () => {
  return (
    <Scan />
  );
};
export default App;

Krok 5:Spusťte svůj projekt

Nyní můžete spustit svůj projekt provedením následujícího příkazu,

react-native run-android

Tady to máš! Vaše vlastní aplikace pro skenování QR kódů v React native :)

Chcete-li experimentovat s různými funkcemi skenování QRCode, vyzkoušejte ve své aplikaci následující metody.


Děkujeme, že jste si přečetli tento článek.

Pokud se vám tento článek líbil, klikněte prosím na srdíčko ♥ a sdílejte, ať ho ostatní najdou!

Celý kód projektu v článku je k dispozici na

GitHub – codemaker2015/qr-code-scanner-react-native

Článek je dostupný také na Medium

Pokud máte zájem o další zkoumání, zde jsou některé zdroje, které mi na cestě pomohly:

  • Nastavení vývojového prostředí · React Native

  • Publikování v Obchodě Google Play · React Native