[react native] react-native-camera 로 바코드 인식하기

1. react-native-permission 라이브러리 설치

 

$ npm install --save react-native-permissions

$ yarn add react-native-permissions

 

 

 

2. [ios] xcode 에 권한 관련 설정

2-1. podfile 에 아래와 같이 입력

 

  permissions_path = '../node_modules/react-native-permissions/ios'

  pod 'Permission-Camera', :path => "#{permissions_path}/Camera"

 

2-2. info.plist 에 아래와 같이 입력

 

  <key>NSCameraUsageDescription</key>
  <string>바코드 스캔을 위해 카메라 사용을 허용해주세요.</string>

 

 

 

3. [android] 메니페스트에 추가

android/app/src/main/AndroidManifest.xml

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

 

 

 

4. 권한 얻기

  import {PERMISSIONS, RESULTS, request} from 'react-native-permissions';

  const check = async () => {
    try {
      const result = await request(PERMISSIONS.IOS.CAMERA);
      if (result === RESULTS.GRANTED) {
		console.log('ok');
      }
    } catch (error) {
      console.log('catch error');
    }
  };

 

 

 

 

5. 사용하기

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { RNCamera } from 'react-native-camera';

class Camera extends Component {
  constructor(props) {
    super(props);
    this.camera = null;
    this.state = {
      barcodeType: '',
      barcodeData: '',
    };
  }

  onBarCodeRead(scanResult) {
    console.log(scanResult.type);
    console.log(scanResult.data);
    if (scanResult.data !== null) {
      this.setState({
        barcodeType: scanResult.type,
        barcodeData: scanResult.data,
      });
    }
    return;
  }

  render() {
    return (
      <View style={styles.container}>
        <RNCamera
          ref={(ref) => {
            this.camera = ref;
          }}
          captureAudio={false}
          autoFocus={RNCamera.Constants.AutoFocus.on}
          type={RNCamera.Constants.Type.back}
          onBarCodeRead={this.onBarCodeRead.bind(this)}
          style={styles.preview}
        ></RNCamera>
        <View>
          <Text> Type : {this.state.barcodeType}</Text>
          <Text> Data : {this.state.barcodeData}</Text>
        </View>
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
  },
  preview: {
    flex: 0.5,
    justifyContent: 'flex-end',
    alignItems: 'center',
  }
  
};

export default Camera;