반응형 개발로그/ReactNative47 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. 다이어리 앱을 만들면서 연습해보자. - [D] realm.delete() / [U] 이전글 처음부터 다시 해보는 npx create-react-native-app dear-diary with ios 세팅! 나만의 프리셋 다이어리 앱을 만들면서 연습해보자. - 모듈설치 /Home / Write Screen 다이어리 앱을 만들면서 연습해보자. - mongoDB 연동(Realm open/스키마 정의 하기) 다이어리 앱을 만들면서 연습해보자. - Write 화면 구현하기 다이어리 앱을 만들면서 연습해보자.- [R] Realm.filtered() 로 조회하고 Home.js 화면 그리기 / write.js에서 저장된 데이터를 Listenning해서 반영하기 다이어리 앱을 만들면서 연습해보자. - context / realm.write() / 창 닫기 저장된 object 지우기 realm.delet.. 2023. 2. 19. 다이어리 앱을 만들면서 연습해보자.- 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. 다이어리 앱을 만들면서 연습해보자. - context / realm.write() / 창 닫기 이전글 처음부터 다시 해보는 npx create-react-native-app dear-diary with ios 세팅! 나만의 프리셋 다이어리 앱을 만들면서 연습해보자. - 모듈설치 /Home / Write Screen 다이어리 앱을 만들면서 연습해보자. - mongoDB 연동(Realm open/스키마 정의 하기) 다이어리 앱을 만들면서 연습해보자. - Write 화면 구현하기 context / realm.write() / 창 닫기 연습 context 란? 많은 스크린이나 컴포넌트에 값을 넣게(=전달하게 )해주는 방법이다. Prop으로 전달하는 방식이 번거로울 정도로 많은 스크린이나 컴포넌트에 값을 전달해야할 때 사용 context 사용법 app.js 에서 context 만들기 export const.. 2023. 2. 18. 다이어리 앱을 만들면서 연습해보자. - Write 화면 구현하기 이전글 처음부터 다시 해보는 npx create-react-native-app dear-diary with ios 세팅! 나만의 프리셋 다이어리 앱을 만들면서 연습해보자. - 모듈설치 /Home / Write Screen 다이어리 앱을 만들면서 연습해보자. - mongoDB 연동(Realm open/스키마 정의 하기) Write 화면 구현하기 Emoticon 버튼 생성 TextInput 키보드 입력 처리하기 Emoticon 버튼 눌렀을 때, CSS 변경하기 키보드의 엔터 눌렀을 때, SAVE 버튼 눌렀을 때 처리하기 How do you feel now? {emotions.map((emotion, index) => ( emotionPress(emotion)} > {emotion} ))} Save 전체 코드.. 2023. 2. 17. react-native 에서 아이콘 표시하는 두가지 방법 첫번째 방법은 react-native-vector-icons 사용하기 설치/사용예제포함 - react-native-vector-icons 설치 후 , 아이콘이 엑박으로 보이는 경우 두번째 방법은 @expo/vector-icons 사용하기 사용방법 별도의 설치는 필요없고, expo 프로젝트라면 import하여 사용할 수 있다. 사용할 수 있는 아이콘 리스트는 여기 에서 확인할 수 있다. 또한 vector-icons는 사용자 정의 아이콘도 지원한다. import * as React from 'react'; import { View, StyleSheet } from 'react-native'; import Ionicons from '@expo/vector-icons/Ionicons'; export defaul.. 2023. 2. 16. <View> 의 onLayout 을 사용하면서 <NavigationContainer>와도 공존하기 의 onLayout 을 사용하면서 와도 공존하기 그야말로 좌충우돌 우당탕탕 좌절의 연속이다. realm 을 사용하려 함으로서 시작되었다. realm 을 초기화(open() )하려면 expo-splash-screen 이 필요했고 splash-screen이 종료되면 최상위 View 의 onLayout 에 realm 초기화 함수를 넣으라고 가이드에 되어있었다. 그런데 난 최상위 컴포넌트가 NavigationContainer 인걸?! 그래서 View 로 감싸도 보고 바꿔도 보고 했는데 결국에 찾은 해결책은 이거다. NavigationContatiner 안에 아무것도 없는 View를 넣어두는 것. 이게 올바른 방법인지는 나 혼자 공부하고 있어, 알 수는 없으나 어쨌든 다음으로 넘어갈 수 있게 되었다. 2023. 2. 16. 이전 1 2 3 4 ··· 6 다음 반응형
