일단 사용법은 npm을 설치 해줍니다. npm 고르는 것은 개발자 선택이니 일단 예시 3개를 올려놨습니다.
AsyncStorage.setItem('id','userId0', () => {
console.log("저장되었습니다!");
}); // 저장하는 법
// 유저 닉네임 불러오기
AsyncStorage.getItem('id', getId => {
console.log(getId);
}); // 이렇게 불러오면 userId0을 불러와서 사용할 수 있습니다.
대표적으로 setItem, getItem 만 알고 있어도 유용하게 사용할 수 있습니다 :)
JSON.stringify 를 통해서 저장 데이터가 Json형태일경우 문자열로 바꾸어 주어야합니다.
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 inManual 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
import TouchID from 'react-native-touch-id';
const optionalConfigObject =
{ title: 'Authentication Required', // 타이틀
imageColor: '#e00606', // 지문인식 기본 컬러
imageErrorColor: '#ff0000', // 지문인식 실패 컬러
sensorDescription: 'Touch sensor', // 터치센서
description Text 변경 sensorErrorDescription: 'Failed', // 터치센서 Fail Text 변경
cancelText: 'Cancel', // Android // 취소버튼 Text 변경
fallbackLabel: 'Show Passcode', // ios ( 비어있으면 레이블이 숨겨짐 )
unifiedErrors: false, // 통합 오류 메시지 사용 ( 기본값 false)
passcodeFallback: false // ios-faceId / touch 사용할 수 없는 경우 기기비밀번호 사용여부
}
TouchID.authenticate('description', optionalConfigObject)
.then(success => {
console.log("지문인식 성공"); // 지문인식 성공했을 때 코드를 넣으면 됨
})
.catch(error => {
console.log("지문인식 실패"); // 실패했을 때 코드를 넣으면 됨.
});
isSupported ()
import TouchID from 'react-native-touch-id';
const optionalConfigObject = {
unifiedErrors: false // 통합 오류 메시지 사용 ( 기본값 false )
passcodeFallback: false // true가 전달되면 기기가 touch id / face id 등에 등록되지 않은
경우 isSupported에서 오류를 반환하도록 허용합니다.
그렇지 않으면 사용자가 등록되지 않은 경우에도 지원되는 방법 만 알려줍니다.(기본값 false)
}
TouchID.isSupported(optionalConfigObject).then(biometryType => {
// Success code
if (biometryType === 'FaceID'){
console.log('faceId 지원')
}
else {
console.log('TouchID 지원.');
}
})
.catch(error => {
// Failure code
console.log(error); // 실패했을 때 에러 로그 찍어보기
});