본문 바로가기
반응형

Frontend/React Native19

[React Native] 리액트 네이티브 AsyncStorage 앱 종료해도 데이터 유지하기 앱 개발을 할 때, 앱 실행중에 데이터를 유지하는 방법이 여러가지가 있는데 앱을 종료했을때에도 데이터를 유지할 수 있는 방법이 있다. AsyncStorage를 사용하는 방법인데 앱 실행시에 로그인 유무 체크에도 활용할 수 있어 유용하며 아래와 같이 사용할 수 있다. # AsyncStorage import 하기 import AsyncStorage from "@react-native-async-storage/async-storage"; # AsyncStorage 데이터 저장하기 AsyncStorage.setItem('sampleData', JSON.stringify({'sampleId':id}), () => { console.log('AsyncStorage setItem'); }); # AsyncStora.. 2023. 6. 16.
[React Native] 리액트 네이티브 리스트 리프레쉬 리렌더링 재조회 하기 - FlatList 리액트 네이티브에서 목록을 만들 때 사용하는 리스트 중 FlatList를 구현했을때 목록을 재조회하는 기능에 대해서 구현했다. 흔히 사용하는 화면을 위에서 아래로 잡아 당기는(내리는) 모션으로 목록의 내용들을 리프레쉬하는 기능이다. # FlatList re-render const [refreshing, setRefreshing] = useState(false); const onRefresh = () => { if(!refreshing){ getRefreshData(); } } const getRefreshData = () => { setRefreshing(true); selectData(); //데이터 조회 함수 호출 setRefreshing(false); } return( ) 위와 같이 설정하여 적용해.. 2023. 6. 11.
[React Native] 리액트 네이티브 안드로이드 기기 뒤로가기 버튼으로 앱 종료 하기 리액트 네이티브로 안드로이드 앱 개발을 하면서 안드로이드 기기에만 있는 물리적인 뒤로가기 버튼을 눌렀을때, 앱을 종료하는 기능을 구현했다. # 안드로이드 기기의 뒤로가기 버튼 눌렀을때 앱 종료 시키기 // 안드로이드 기기 뒤로가기 버튼 const backAction = () => { Alert.alert( '알림', '앱을 종료하시겠습니까?', [ {text: '취소', onPress: () => {}, style: 'cancel'}, { text: '확인', onPress: () => { BackHandler.exitApp(); }, style: 'destructive', }, ], { cancelable: true, onDismiss: () => {}, }, ); return true; } const.. 2023. 6. 6.
[React Native] 리액트 네이티브 데이터 처리 시 splash loading 로딩 구현하기 리액트 네이티브로 데이터 조회, 저장, 수정, 삭제 등의 작업을 할 때 또는 API를 통해 데이터를 조회해 오는 시간동안 사용자에게 보여줄 로딩을 제공해 주어야 하는데, 로딩 화면 또는 이미지를 보여주지 않는 경우 사용자는 실행되지 않는 상태로 인지하여 여러번 호출하거나 시간이 너무 길어지면 이탈할 수도 있으므로 로딩 처리는 중요하다. 리액트 네이티브의 ActivityIndicator를 이용하여 splash 구현하는 방법이다. # 라이브러리 설치하기 npm i react-native-splash-screen --save # ActivityIndicator 구현하기 import {StyleSheet, View, ActivityIndicator} from 'react-native'; function Spla.. 2023. 6. 2.
반응형

티스토리툴바