전체 (8) 썸네일형 리스트형 [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.. DB 연동 하여 fullcalendar로 일정 프로그램 구현 이전에 쓰던 쓰던 일정 프로그램을 개선 시키고자 fullcalendar로 일정 프로그램을 새로 만들었다. ajax, jquery, java, oracle 모두 사용하여 DB에 저장 시키는 것까지 모두 구현 했고, fullcalendar의 일정 외에 분류, 구분 값들을 추가하여 일정을 관리 할 수 있도록 했다. * 중요 내용이 아닌 것들은 생략 1. Schedule.jsp (script 영역) var sch; var stdDate; $().ready(function() { // 사이트 변경으로 인한 일정 조회 $(document).on('change', '[name=SITE_NO]', function(){ fn_schMonthList(); }); // 구분 값 변경으로 인한 일정 조회 $(document).. [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 다음
