react-native QR Code 만들기

요즘 코로나라 앱에서 QR을 많이 사용하는데  QR Code 만드는 법을 봅시다.

 

www.npmjs.com/package/react-native-qrcode-svg

react-native-qrcode-svg

위 라이브러리를 사용했습니다.

 

안드로이드

 

ios

 

 

yarn add react-native-svg react-native-qrcode-svg

yarn add react-native-svg react-native-qrcode-svg

 

npm i -S react-native-svg react-native-qrcode-svg

npm i -S react-native-svg react-native-qrcode-svg

으로 라이브러리를 install합니다.

 

react-native version이 <=0.59.X 라면 link를 꼭 해줘야합니다.

 

react-native link react-native-svg

react-native link react-native-svg

 

도큐먼트에 있는 example Code 들 입니다.

 

import QRCode from 'react-native-qrcode-svg';

// Simple usage, defaults for all but the value
render() {
  return (
    <QRCode
      value="http://awesome.link.qr"
    />
  );
};

 

// 30px logo from base64 string with transparent background
render() {
  let base64Logo = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAA..';
  return (
    <QRCode
      value="Just some string value"
      logo={{uri: base64Logo}}
      logoSize={30}
      logoBackgroundColor='transparent'
    />
  );
};

 

// 20% (default) sized logo from local file string with white logo backdrop
render() {
  let logoFromFile = require('../assets/logo.png');
  return (
    <QRCode
      value="Just some string value"
      logo={logoFromFile}
    />
  );
};

 

// get base64 string encode of the qrcode (currently logo is not included)
getDataURL() {
  this.svg.toDataURL(this.callback);
}

callback(dataURL) {
  console.log(dataURL);
}

render() {
  return (
    <QRCode
      value="Just some string value"
      getRef={(c) => (this.svg = c)}
    />
  );
}

 

등 다양한 형태로 쓸 수 있습니다.

저는 이렇게 사용했습니다.

 

 import QRCode from 'react-native-qrcode-svg';
 
 
 <View style={styles.qrCodeStyle}>
   <View>
     <QRCode
       size= {200}			  // 로고 사이즈 조절
       value={data.address}   // 실제 연결 될 주소 
       logoSize={300}		  
       logoBackgroundColor='transparent'
     />
   </View>
 </View>
 
 

그러면 QR Code가 나옵니다.

Props

NameDefaultDescription

size  - 렌더링 된 이미지의 크기(픽셀)	100	Size of rendered image in pixels
value - QR 코드 값	'this is a QR code'	String Value of the QR code. Can also accept an array of segments as defined in Manual mode. Ex. [{ data: 'ABCDEFG', mode: 'alphanumeric' }, { data: '0123456', mode: 'numeric' }, { data: [253,254,255], mode: 'byte' }]
color - QR 코드의 색상	'black'	Color of the QR code
backgroundColor - 배경색	'white'	Color of the background
enableLinearGradient - Gradient 활성화, 비활성화	false	enables or disables linear gradient
linearGradient - 선형 Gradient 만드는데 사용되는 2개의 RGB 색상 배열	['rgb(255,0,0)','rgb(0,255,255)']	array of 2 rgb colors used to create the linear gradient
gradientDirection - 선형 Gradient의 방향	[170,0,0,0]	the direction of the linear gradient
logo - 이미지 소스 개체	null	Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')}
logoSize - 각인된 로고의 크기	20% of size	Size of the imprinted logo. Bigger logo = less error correction in QR code
logoBackgroundColor - 배경색	backgroundColor	The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop.
logoMargin - margin 값	2	logo's distance to its wrapper
logoBorderRadius - Radius 값	0	the border-radius of logo image (Android is not supported)
quietZone - qr주변의 영역	0	quiet zone around the qr in pixels (useful when saving image to gallery)
getRef - svg참조 가져오기	null	Get SVG ref for further usage
ecl - 오류 수정 수준	'M'	Error correction level
onError(error) - 생성중 예외 발생 시 콜백 발생	undefined	Callback fired when exception happened during the code generating process

도큐 먼트에 있는 이 부분을 잘 사용하면 custom 도 잘 될 것 같습니다 !