엑스포 바코드 스캐너

시작하기 전에 노드, npm 및 expo cli를 업데이트합니다. 모든 최신 기능을 사용하기만 하면 됩니다. 이제 새 엑스포 프로젝트를 만듭니다. 이전에 설정한 모든 항목이 포함된 프로젝트를 선택합니다. 빠르게 시작하기 위해 이 앱을 선택합니다.

nvm use 12 // install version 12 - latest@2019  
npm install -g expo-cli // install expo cli globally  
expo init // create a project  
// choose the javascript project with navigation setup

최종 제품 데모

스캐너 화면

앱에서 최소 설정 프로젝트를 사용하고 있으므로 기본값HomeScreen을 ScannerScreen로 사용하고 있습니다. 우리는 상태 관리를 위해 후크가 있는 기능적 구성 요소를 간단히 사용할 수 있는 React 클래스 구성 요소를 사용하고 있습니다.

스캐너 화면은 클래스 기반 구성 요소입니다. 상태에는 두 가지 중요한 속성이 있습니다. 하나hasCameraPermissions는 화면에 카메라 액세스 권한이 있는지 여부를 나타내며 두 ​​번째 속성isScanned은 스캔 여부를 나타냅니다. 처음에 ScannerScreen에 대한 hasCameraPermissions의 상태는 null입니다. Null은 권한을 요청하고 있음을 의미합니다. 그리고 상태isScanned가 거짓이면 지금은 아무 것도 스캔되지 않는다는 의미입니다.

스캐너에는 카메라 권한이 필요하므로 사용자에게 카메라 권한을 요청해야 합니다.
권한은 비동기 작업이며 이 구성 요소가 마운트되자마자 권한을 요청해야 하므로componentDidMount부터 시작하는 것이 좋습니다. 참고 권한 요청은 비동기식이므로 componentDidMount를 async 함수로 만들어야 합니다. 카메라 권한이 부여된 경우hasCameraPermissions가 true로 설정되고 권한이 거부된 경우*hasCameraPermissions*가 false로 설정되고 거부된 권한 메시지를 렌더링하면 바코드 스캐너를 성공적으로 렌더링하고 카메라를 열 수 있습니다.

다음으로 성공적으로 스캔된 바코드를 처리하는 기능이 있습니다. 바코드를 스캔하면 이 함수가 호출됩니다. 우리 함수*handleBarCodeScanned*는 *onBarCodeScanned* 구성 요소의 *BarCodeScanner* 소품에 대한 콜백으로 전달됩니다. *handleBarCodeScanned* 함수에서 우리는 두 가지 중요한 속성을 가진 인수로 스캔 개체를 받습니다. 하나는 스캔된 바코드 유형을 의미하는 *type*이고 다른 하나는 바코드의 암호화된 데이터인 *data*입니다. 다른 속성은 우리와 관련이 없기 때문에 우리는 이러한 속성을 해체할 것입니다. *handleBarCodeScanned* 함수의 경우 코드 데이터를 매개변수로 전달하는 *DecodeScreen*로 이동합니다. 그러면 DecodeScreen가 데이터를 표시합니다.

import React from 'react';


import { Container, Spinner, TextH3 } from "../UI";

import * as Permissions from 'expo-permissions';

import { BarCodeScanner } from 'expo-barcode-scanner';

import {window} from "../constants/Layout";

class ScannerScreen extends React.Component{
  static navigationOptions = {
    header: null
  }
  // Component State
  state = {
    hasCameraPermission: null, // if app has permissions to acess camera
    isScanned: false // scanned
  }
  async componentDidMount() {
    // ask for camera permission
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    console.log(status);
    this.setState({ hasCameraPermission: status === "granted" ? true : false });
  }


  handleBarCodeScanned = ({ type, data }) => {
      // Do something here
      this.props.navigation.navigate('Decode', {
        data: data 
      });
  }
  render(){
    const { hasCameraPermission, isScanned } = this.state;
    if(hasCameraPermission === null){
      // requesting permission
      return (
        <Spinner />
      );
    }
    if(hasCameraPermission === false){
        //permission denied
      return ( 
        <Container>
         <TextH3>Please grant Camera permission</TextH3>
        </Container> 
      )
    }
    if(hasCameraPermission === true && !isScanned && this.props.navigation.isFocused() ){
      // we have permission and this screen is under focus
      return <Container style = {{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'

      }}>
        <TextH3>Scan code inside window</TextH3>
        <BarCodeScanner
          onBarCodeScanned = { isScanned ? undefined : this.handleBarCodeScanned }
          style = {{
            height:  window.height / 2,
            width: window.height,
          }}
        >
        </BarCodeScanner>
      </Container>
    }
    else{
      return <Spinner />;
    }
  }
}
export default ScannerScreen;

Github 레포: vtechguys/medium/under folder RN_bar_code_scanner