요즘 코로나라 앱에서 QR을 많이 사용하는데 QR Code 만드는 법을 봅시다.
www.npmjs.com/package/react-native-qrcode-svg
react-native-qrcode-svg
A QR Code generator for React Native based on react-native-svg and javascript-qrcode.
www.npmjs.com
위 라이브러리를 사용했습니다.
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 도 잘 될 것 같습니다 !
'react-native' 카테고리의 다른 글
| react-native asyncstorage? (0) | 2021.04.18 |
|---|---|
| react-native 생체인식 사용하기 (0) | 2021.02.18 |
| react-native ImageBackground 백그라운드 이미지 (0) | 2020.12.02 |
| react-native-svg 라이브러리를 알아보자 (0) | 2020.11.25 |
| react-native-image-picker 모듈 ! 사진 촬영, 갤러리 이미지 선택 라이브러리 를 알아보자 (0) | 2020.11.06 |
