react-native (7) 썸네일형 리스트형 [RN] react-native Webview 로딩 이미지 react-native Webview 환경에서 화면이 이동될 때 노출되는 로딩 이미지를 애니메이션으로 구현. 나는 이미지 3개를 순차적으로 같이 노출 시키기 위해 zoom과 흐릿한 효과를 추가 했다. 애니메이션을 사용하기 위해 react-native-animatable 설치 npm install --save react-native-animatable LoadingScreen.js import React, {useEffect, useState} from 'react'; import {View, StyleSheet, Image} from 'react-native'; import * as Animatable from 'react-native-animatable'; /* 로딩이미지 */ const BlurryI.. [RN] react-native-orientation 화면 고정 react-native 화면 고정을 위해 react-native-orientation을 적용 했는데 IOS에서 동작을 안하는 문제가 발생. react-native-orientation가 더이상 업데이트를 안해 최신 버전에는 호환이 안되는 문제인 것 같다. 그래서 react-native-orientation-locker로 변경하여 적용했다. 사용법은 react-native-orientation과 유사함 npm install --save react-native-orientation-locker Test.js import Orientation from 'react-native-orientation-locker'; class Test extends Component { componentDidMount() { /.. [RN] react-native-pin-view PIN CODE 구현 react-native-pin-view PIN 번호 기능 구현 PIN 번호 입력,재입력 후 keychain에 저장해 확인까지 하는 기능 구현 keychain 및 Icon 활용은 아래 글 참고 2023.08.09 - [react-native] - [RN] react-native-keychain 구현 2023.08.11 - [react-native] - [RN] react-native-vector-icons 사용하기 react-native-pin-view 설치 npm install --save react-native-pin-view cd ios pod install RegisterPinCodeScreen.js PIN 번호 등록, 재확인 화면 import React, { useEffect, useRef, us.. [RN] react-native-vector-icons 사용하기 react-native-pin-view를 구현하다 참고 소스에 react-native-vector-icons를 활용해 아이콘을 생성하는게 있어서 같이 구현해봄. react-native-vector-icons 설치 npm --save react-native-vector-icons cd ios pon install 사용방법 import Icon from "react-native-vector-icons/Ionicons" react-native-vector-icons에는 Ionicons, FontAwesome 등 다양한 스타일이 있다. 아래 사이트에서 원하는 스타일을 골라 활용하면 된다. https://oblador.github.io/react-native-vector-icons/ react-native-vec.. [RN] react-native 생체인증 구현, biometrics와 touch-id 앱의 지문, FACE ID 로그인을 위해 생체인증을 적용 했다. react-native-touch-id로 작업을 했었지만 react-native-biometrics도 있어 2개를 같이 구현했다. react-native-touch-id는 업데이트가 된지 오래 됐다고 하는데 별 차이 없어 보임.. ● 설치 및 권한 설정 npm install npm install --save react-native-biometrics npm install --save react-native-touch-id Android(AndroidManifest.xml) IOS(info.plist) NSFaceIDUsageDescription RoyalFund Authentication with TouchId or FaceID ● reac.. [RN] react-native-keychain 구현 사용자의 인증 정보들을 앱에 저장하기 위해 react-native-keychain을 구현했다. 구현만 해놓고 나중에 생체인증과 같은 민감한 정보들을 사용하는데 쓸 것 같다.(PIN 번호도 저장해도 괜찮을 듯) npm install --save react-native-keychain secure-key-store.js import * as Keychain from 'react-native-keychain'; // 데이터 저장 export const setItem = async (key, value) => { try { await Keychain.setInternetCredentials( key, key, value ); }catch(error){ console.log('keychain set error:'.. [RN] react-native-qrcode-scanner 활용 및 오류 수정 react-native-qrcode-scanner를 활용하면서 android에선 정상적으로 실행되었지만 IOS에서 문제가 생겨 IOS 중점으로 글을 남겨봄. 1. react-natvie-qrcode-scanner, react-native-permissions 설치 npm install react-native-qrcode-scanner npm install react-native-permissions 2. package.json에 내용 추가 "scripts": { ... , "postinstall": "react-native setup-ios-permissions && pod-install" }, "dependencies": { ... }, "reactNativePermissionsIOS": [ "Came.. 이전 1 다음