[React Native] 라이브러리 및 속성 사용법 (react-native-qrcode-scanner)

 

Qr 스캔하는 기능을 만들었다.

react-native-qrcode-scanner 라이브러리의 속성사용방법을

내가 실제로 작성한 코드를 기반으로 정리해보았다.

 

---

라이브러리 설치하는 방법

 

[React Native] 라이브러리 및 속성 사용법 (react-native-qrcode-scanner)

https://daram-tree.tistory.com/304

 

---

라이브러리를 실제로 구현한 코드샘플

QRCodeScanner 태그를 활용하여, 아래와 같이 코드를 작성하여 화면을 구연하였다.

 

▼ qr 스캔화면 이미지

왼쪽이미지는 qr스캔하는 카메라화면

오른쪽이미지는 qr완료시 모달화면이 발생한다.

 

▼ qr스캔화면 샘플코드

import React from 'react';
import QRCodeScanner from 'react-native-qrcode-scanner';	// 설치한 라이브러리 import

import { ConfirmModal } from '../../components/form/Box';
import { OneWaybutton } from '../../components/form/Button';

const QrScan = ({ navigation }) => {
    const resultAlert = () => {.....};
  
  return (
    <>
        {scanActive && (
          <QRCodeScanner
            reactivate={true}       //default: false   // 스캔되고나서, 스캔을 계속 active 할지말지 기능 (true: 계속 스캔됨, false:한번만 스캔됨)
            showMarker={true}       //default: false   // 카메라앵글에서 스캔되는 구간의 테두리를 보일지말지 기능
            vibrate={false}         //default: true    // 스캔되면 핸드폰진동이 울릴지말지 기능 (permission 필요)
            onRead={e => onSuccess(e)}      // qr이 스캔되면 발생되는 함수 (이벤트리스너)
            containerStyle={{.....}}        // 전체화면 스타일
            cameraContainerStyle={{.....}}  // 카메라 스타일
            topContent={.....}              // 화면 상단 내용 → '네모 안에 QR코드를 스캔해주세요.'
            bottomContent={.....}           // 화면 하단 내용 →  '홈화면으로 이동'
          />
        )}

        <Modal	// qr스캔완료시 발생되는 모달
          isVisible={scanActive}>
            <ConfirmModal   
              title={`승인이 완료되었습니다.`}
              button={
                <OneWaybutton
                  buttonFun={resultAlert}
                  buttonText={`확인`}
                />
              }
            />      
        </Modal>
    </>
  );
};

 

---

qr스캔의 reactivate, ref 사용법

qr스캔하면서 계속 스캔 또는 한번만 스캔되는 에러가 발생하여, 해결하는데 어려움이 있었다.

 

qr이 한번만 스캔되고(연쇄스캔X) 모달창이 발생하면, 모달창을 닫았을때 다시 스캔기능이 작동되게하는 방법을 찾았다.

(hooks를 활용한 useState / 라이브러리 속성을 활용한 ref ) 2가지의 해결방법을 아래에 정리하엿다.

 

---

 

1. (hooks) useState 사용법

useState (scanActive, modalVisible)의 Boolean값에 따라, 

스캔화면인 <QRCodeScanner>태그가 보일지, 알림창인 <Modal>이 보일지를 결정한다.

Boolean값에 따라, 관련 태그가 새로 그려진다.

 

▼ 샘플코드

import React, {useState} from 'react';
import QRCodeScanner from 'react-native-qrcode-scanner';

import { ConfirmModal } from '../../components/form/Box';
import { OneWaybutton } from '../../components/form/Button';

const QrScan = ({ navigation }) => {
  const [scanActive, setScanActive] = useState(true);                // 화면 첫 입장시, 스캔화면 true로 설정
  const [modalVisible, setModalVisible] = useState(false);           // 화면 첫 입장시, 모달화면 false로 설정

  const resultAlert = () => {
    setScanActive(true)           // 모달'확인'버튼 터치시, 스캔화면 true로 설정
    setModalVisible(false)        // 모달'확인'버튼 터치시, 모달화면 false로 설정
  };      
  const onSuccess = e => {                              
    setScanActive(false);         // qr스캔성공시, 스캔화면 false로 생성
    setModalVisible(true);        // qr스캔성공시, 모달화면 true로 생성
  };
  
  return (
    <>
        {scanActive && (    // true면 스캔화면(<QRCodeScanner>)이 생기고, false면 지워짐.
          <QRCodeScanner
            reactivate={false}    
            /* default: false 라서, 해당 속성을 생략가능 → 스캔되고나서, 스캔을 계속 active 할지말지 기능 (true: 계속스캔됨, false:한번만 스캔됨) */
            onRead={e => onSuccess(e)}    // qr이 스캔되면 발생되는 함수 (이벤트리스너를 전달함)
            />
        )}

        <Modal    
          isVisible={modalVisible}		// true면 모달창이(<Modal>)생기고, false면 지워짐.
          >   
            <ConfirmModal   
              title={`승인이 완료되었습니다.`}
              button={
                <OneWaybutton
                  buttonFun={resultAlert}
                  buttonText={`확인`}
                />
              }
            />      
        </Modal>
    </>
  );
};

 

---

 

2. (props) ref, (hooks)useRef 사용법

react-native-qrcode-scanner 라이브러리에서 제공하는 ref 속성으로 활용하여, reactivate 속성만 재실행한다.

 

▼ 샘플코드

import React, { useState, useRef } from 'react';
import QRCodeScanner from 'react-native-qrcode-scanner';

import { ConfirmModal } from '../../components/form/Box';
import { OneWaybutton } from '../../components/form/Button';

const QrScan = ({ navigation }) => {
  const scannerRef = useRef();                                // useRef() 를 scannerRef에 담기
  const [modalVisible, setModalVisible] = useState(false);    // 화면 첫 입장시, 모달화면 false로 설정

  const resultAlert = () => {
    scannerRef.current.reactivate();      // scannerRef에 담긴 useRef중에, reactivate만 재실행한다.
    setModalVisible(false);               // 모달'확인'버튼 터치시, 모달화면 false로 설정
  };
  const onSuccess = e => {
    setModalVisible(true);                // qr스캔성공시, 모달화면 true로 생성
  };

  return (
    <>
      <QRCodeScanner
        ref={scannerRef}            // scannerRef에 <QRCodeScanner>태그 라이브러리에서 제공하는 ref를 담는다.
        reactivate={false}
        /* default: false 라서, 해당 속성을 생략가능 → 스캔되고나서, 스캔을 계속 active 할지말지 기능 (true: 계속스캔됨, false:한번만 스캔됨) */
        onRead={e => onSuccess(e)}  // qr이 스캔되면 발생되는 함수 (이벤트리스너를 전달함)
      />

      <Modal
        isVisible={modalVisible}    // true면 모달창이(<Modal>)생기고, false면 지워짐.
      >
        <ConfirmModal
          title={`승인이 완료되었습니다.`}
          button={<OneWaybutton buttonFun={resultAlert} buttonText={`확인`} />}
        />
      </Modal>
    </>
  );
};

 

---

 

▼ useState와 ref의 화면이미지 차이점

왼쪽이미지는 useState를 활용했을 때의 화면상태이다.

useState를 사용하면, <QRCodeScanner>태그가 false인 상태라 모달뒤의 화면이 백지가 된다.

true가 되면 모달은 false가되어 없어지고, <QRCodeScanner>태그가 새로 그려진다.

 

오른쪽이미지는 ref를 활용했을 때의 화면상태이다.

라이브러리에서 제공하는 속성인 ref가 useRef hooks를 활용해서, 

라이브러리 속성인 reactivate만 새로 실행된다.

따라서, 모달뒤의 화면은 qr화면이 그대로 존재한다.

 

---

개인적으로 개발시행착오를 겪으면서, 그런 경험들을 기록하기도하고, 모은정보들을 메모하며, 개인공부내용을 공유하는 게시물입니다. 친절한 조언과 다양한 의견 남겨주시고, 소통해주시는분들은 언제든지 환영합니다 :D