개념

어싱크스토리지는 개발을 할 때 변수값을 저장해두는 공간이라고 생각하면 편할 것 같습니다!

근데 어싱크스토리지 말고도 변수값은 저장은 해둘 수 있는 곳이 많죠 ex) 컴포넌트의 state나 redux등으로 저장이 

가능합니다.

그러면 어싱크스토리지는 왜 쓰는가?

어싱크스토리지는 로컬 데이터베이스 저장소라고 생각하시면 다가가기 쉬울 것 같습니다. 앱이 꺼져도 데이터베이스는 남아있듯이 똑같이 어싱크스토리지에 값을 저장하고 앱을 꺼도 데이터가 저장되어있는 개념입니다.

 

reactnative.dev/docs/asyncstorage

 

🚧 AsyncStorage · React Native

Deprecated. Use one of the community packages instead.

reactnative.dev

 

www.npmjs.com/package/@react-native-community/async-storage

 

@react-native-community/async-storage

Asynchronous, persistent, key-value storage system for React Native.

www.npmjs.com

https://github.com/andpor/react-native-sqlite-storage

 

andpor/react-native-sqlite-storage

Full featured SQLite3 Native Plugin for React Native (Android and iOS) - andpor/react-native-sqlite-storage

github.com

일단 사용법은 npm을 설치 해줍니다. npm 고르는 것은 개발자 선택이니 일단 예시 3개를 올려놨습니다.

 

AsyncStorage.setItem('id','userId0', () => {
  console.log("저장되었습니다!");
});   // 저장하는 법

// 유저 닉네임 불러오기
AsyncStorage.getItem('id', getId => {
  console.log(getId); 
}); // 이렇게 불러오면 userId0을 불러와서 사용할 수 있습니다.

대표적으로 setItem, getItem 만 알고 있어도 유용하게 사용할 수 있습니다 :)

 

JSON.stringify 를 통해서 저장 데이터가 Json형태일경우 문자열로 바꾸어 주어야합니다.

데이터 바꾸기 

AsyncStorage.mergeItem(key값, 바꿀데이터)

 

키값을 통해서 저장되는 데이터를 바꿀 수 있습니다. 

 

데이터 전체 지우기

AsyncStorage.clear()  // 복구 불가니 조심히 사용하세요

요즘 코로나라 앱에서 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

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

 

안드로이드

 

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 도 잘 될 것 같습니다 !

 

React-native 생체인식 적용하기

www.npmjs.com/package/react-native-touch-id

 

react-native-touch-id

React Native authentication with the native Touch ID popup.

www.npmjs.com

위에 라이브 러리를 사용

Install

npm i --save react-native-touch-id

npm i --save react-native-touch-id

or

yarn add react-native-touch-id

yarn add react-native-touch-id

Android

react-native version < 0.60 이면

 

react-native link react-native-touch-id

react-native link react-native-touch-id

 

으로 link 해준다.

AndroidManifest.xml

AndroidManifest.xml에

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

추가 -> 핸드폰 지문인식 권한 추가

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

코드

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); // 실패했을 때 에러 로그 찍어보기  
    });

 

 

이렇게 적용을 해보았습니다.

실제 s10에 적용한 생체인증 

 

reactnative.dev/docs/imagebackground

 

ImageBackground · React Native

A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the ` component, which has the same props as `, and add whatever children to it you would like to layer on top of it.

reactnative.dev

react-native에서 백그라운드 이미지를 넣어봅시다 !

rn에서는 내장함수로 ImageBackground 가 있습니다. js 같은 경우는 스타일에서 background-image: url( ~); 이렇게 주면 백그라운드 이미지가 들어가는데 rn은 

const App = () => (
  <View style={styles.container}>
    <ImageBackground source={image} style={styles.image}>
      <Text style={styles.text}>Inside</Text>
    </ImageBackground>
  </View>
);

이런방법으로 사용해야합니다.

 

저의 같은 경우는 

<ImageBackground style={styles.imgWrapper} source={require('../assets/test.png')} >
      <Text>테스트</Text>
</ImageBackground>

이렇게 사용했습니다.

여기서 중요한점은 style을 사용해줘야 에러가 안납니다. 

감사합니다.

+ Recent posts