웹 프론트엔드/React-Native14 React Native : splash 화면 적용하기 React Native에서 데모 앱을 만드는데 Splash를 구현해야 할 일이 생겼습니다. React Native에서 splash를 적용하는 방법에 대해 알아보겠습니다. 1-1) Splash 구현을 위한 준비 단계 (Android) React Native에서 Splash를 구현하기 위해서는 react-native-splash-screen 라는 npm 라이브러리를 사용하는 것이 편리합니다. 1. react-native-splash-screen 라이브러리 설치 (공통) npm i react-native-splash-screen --save 2. android/app/src/main/ 맨 하단에 있는 MainActivity.java 파일 수정하기 (Android) package com.lottoproject;.. 2021. 5. 25. React Native : AsyncStorage 쉽게 사용해보기. 앱 개발을 할때 데이터를 저장할때 저장소에 대해서 고민을 많이 합니다. 보통 Component 내부의 State에 저장을 하거나 Component의 데이터의 State를 중앙집중적으로 관리하기 위해서 Redux를 사용하기도 하죠 ㅎㅎ 하지만 React-Native에서는 Screen의 Component의 State등에 데이터를 담아서 저장하면 문제점이 조금 있습니다. State는 앱이 꺼지거나, Screen의 이동이 일어나면 값이 보장되지 않고 사라질수 있기 때문입니다. 따라서 앱이 꺼져도 써야하는 데이터의 경우 Local 데이터베이스에 저장하여야하는데요, 보통 유저정보를 저장한다거나, JWT토큰저장, 유저가 기록한 메모를 저장 하는데에 사용했었습니다. React Native에서 Local Database.. 2020. 8. 23. React Native : 버튼, TextInput 등에 box-shadow 주는 방법 React Native에서 box-shadow주기 react-native에서 버튼등에 box-shadow를 주고싶을 때가 있습니다. 그럴때는 RN에서 shadowColor, shadowOffset, shadowOpacity, shadowRadius, elevation 속성을 사용하여 box-shadow를 주면 됩니다. 아래 사이트를 이용하면 좀 더 편리하게 box-shadow 스타일링을 할 수 있습니다. :) https://ethercreative.github.io/react-native-shadow-generator/ 다음은 제가 textInput을 box-shadow로 만든 예제입니다. { setInputText(text); }} onSubmitEditing={Keyboard.dismiss} ref .. 2020. 7. 21. React-Native : qrcode 스캐너 이용하기 React-Native로 QR코드 인식 카메라 구현해보기 React-Native로 개발하던중 qrcode를 사용할 일이있어서, 해당 react-native-qrcode-scanner라는 라이브러리를 찾게 되었습니다.. 외국문서는 많이 있지만 한글로 된 문서는 많이 없는것 같아서 구현하고 테스트하는데 시간이 생각보다 걸리더라구요.. 아래 방법으로 구현하면 실제로 예제는 구동시킬수 있는것 같아서 간단하게 메모를 해보았습니다. ~ 1. react-native-qrcode-scanner 라이브러리 설치 및 의존성 라이브러리 설치 npm install react-native-camera npm install react-native-qrcode-scanner npm install react-native-permis.. 2020. 7. 19. 이전 1 2 다음
