React Native를 이용한 QR코드 스캐너 앱

QR 코드는 저장 용량이 크고 즉시 읽을 수 있는 기능으로 인해 인기가 있습니다. 오늘날 대부분의 애플리케이션은 항목 식별, 추적 및 마케팅을 위해 QR 코드를 사용합니다.

시작하기



몇 가지 QR 코드 스캔 애플리케이션은 슈퍼마켓에서 제품을 스캔하고, 여권에서 ID 번호를 읽고, 차량 등록 번호를 읽는 것입니다. 바코드에서 16자리의 긴 숫자를 입력하는 대신 상품을 쉽게 인식할 수 있는 방법을 제공합니다.

React-Native에는 QR 코드 스캔을 수행하기 위한 react-native-qrcode-scanner라는 오픈 소스 npm 패키지가 있습니다. 다음은 React-native를 사용하여 구현할 수 있는 스캔 플러그인 및 기능 목록입니다.
  • react-native-qrcode-scanner
  • react-native-scan-view
  • 반응 네이티브 카메라

  • 이 기사의 아이디어는 React Native를 사용하여 QR 코드 스캐너 애플리케이션을 개발하는 것입니다.

    1단계: 반응 네이티브에서 프로젝트 만들기



    리액트 네이티브로 프로젝트를 생성해 봅시다.

    리액트 네이티브를 처음 사용하는 경우 다음 기사를 훑어보고 hello world 앱 데모와 함께 react-native의 종속성 및 환경 설정에 대해 알아볼 수 있습니다.

    Develop hello world app in React native

    터미널을 열고 아래 명령을 실행하여 반응 네이티브 프로젝트를 만듭니다.

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


    2단계: 종속성 추가



    QRCode 스캐닝의 종속성을 프로젝트에 설치합니다.

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

    react-native-qrcode-scanner 를 사용하려면 모듈을 가져오고 구성 요소에서 <QRCodeScanner /> 태그를 사용하십시오.

    3단계: 권한 추가



    AndroidManifest.xml에 다음 코드를 추가하여 카메라에 액세스합니다.

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


    4단계: QR 코드 스캐너 구현



    QRCode 메소드를 호출하기 위해 캡처 버튼을 클릭하여 아름다운 뷰를 만들어 봅시다. react-native-qrcode-scanner를 사용하여 QR 코드를 스캔하기 위해 Scan이라는 구성 요소를 생성합니다.

    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;
    


    App.js 파일에서 스캔 구성 요소를 바인딩합니다.

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


    5단계: 프로젝트 실행



    이제 다음 명령을 실행하여 프로젝트를 실행할 수 있습니다.

    react-native run-android
    


    당신은 그것을 가지고 있습니다! React Native의 나만의 QR 코드 스캐너 앱 :)



    QRCode 스캐닝의 다양한 기능을 실험하려면 애플리케이션에서 다음 방법을 시도하십시오.


    이 기사를 읽어 주셔서 감사합니다.

    이 글이 마음에 드셨다면 다른 분들이 쉽게 찾을 수 있도록 하트♥ 를 눌러주세요!

    기사에 있는 프로젝트의 전체 코드는 다음에서 사용할 수 있습니다.

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

    이 기사는 Medium에서도 볼 수 있습니다.

    추가 탐색에 관심이 있는 경우 여기에서 도움이 되는 몇 가지 리소스를 찾을 수 있습니다.
  • Setting up the development environment · React Native
  • Publishing to Google Play Store · React Native
  • 좋은 웹페이지 즐겨찾기