반응형 React Native4 ReactNative Animated Interpolation 예제 이전글 2023.01.31 - [개발로그/ReactNative] - react native Animated 를 사용할때 알아야할 절대 Rules! 2023.01.31 - [개발로그/ReactNative] - React Native Animated - 애니메이션 value 를 수정하기 위해 사용하는 것들. 예제 포함 2023.02.01 - [개발로그/ReactNative] - 에러가 있는 코드로부터 배운다. React Native Animated 에서의 Value 수정하기(useRef) Interpolation (공부중) inputRange의 데이터를 주면 ouputRange 데이터값들로 변환하여 반환해준다. const opacity = Y_POSITION.interpolate({ inputRange: [.. 2023. 2. 20. 다이어리 앱을 만들면서 연습해보자.- LayoutAnimation 종류 / 사용방법 LayoutAnimation state가 변경되면, 그 후에 layout에 animation을 실행하고 싶어! 라고 할때 사용한다. 사용법 import { LayoutAnimation} from "react-native"; LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); 다이어리 앱에 적용예: Home.js useEffect(() => { // Home 컴포넌트가 mount 될때 조회해서 state에 등록한다. const feelings = realm.objects("Feeling"); // feelings 가 수정/삭제/생성 등의 이벤트가 있을 때 감지하기 위한 리스너를 등록한다. feelings.addListener((feelings, .. 2023. 2. 18. 다이어리 앱을 만들면서 연습해보자.- [R] Realm.filtered() 로 조회하고 Home.js 화면 그리기 / write.js에서 저장된 데이터를 Listenning해서 반영하기 이전글 처음부터 다시 해보는 npx create-react-native-app dear-diary with ios 세팅! 나만의 프리셋 다이어리 앱을 만들면서 연습해보자. - 모듈설치 /Home / Write Screen 다이어리 앱을 만들면서 연습해보자. - mongoDB 연동(Realm open/스키마 정의 하기) 다이어리 앱을 만들면서 연습해보자. - context / [C] realm.write() / 창 닫기 저장된 데이터를 불러와서 필터링하기 const FeelingSchema = { name: "Feeling", properties: { _id: "int", emotion: "string", message: "string", }, primaryKey: "_id", }; ////////////.. 2023. 2. 18. ReactNative 네비게이터 일반( Stack Navigator , Native Stack Navigator 차이점) 리엑트 네이티브에서 네비게이션(페이지 이동)을 구현하려면 두가지 선택권이 있다. 하나는 Stack Navigator 이고 나머지 하나는 Native Stack Navigator 이다. 어떤것을 선택할지는 각각 어떤 차이가 있는지 알아보면 결정하기 쉬울 것이다. @react-navigation/stack stack 네비게이터 동작 모습 Stack Navigator (스택 네비게이터) Android 와 IOS의 look& fell 에 친숙할 수 있도록 구현되었다. 무슨말이냐면 Stack Navigator 로 구현하면 하나의 코드로 IOS에서는 IOS 의 모습으로 Android에서는 안드로이드의 모습으로 보인다는 뜻이다. 단, 애니메이션은 커스터마이징 할 수 있다. 스택 네비게이터는 자바스크립트로 구현되고, .. 2022. 12. 30. 이전 1 다음 반응형
