코딩생활/ReactNative24 [React Native] 3-4 새 글 작성하기 이번엔 WriteScreen의 기능을 구현하겠습니다. 그리고 FeedsScreen에 WriteScreen을 열 수 있는 FloatingWriteButton도 만들어 보겠습니다. 프로젝트에 components 디렉터리를 만들고 그 안에 파일을 작성하세요 components/FloatingWriteButton import React from 'react'; import {View, StyleSheet, Platform, Pressable} from 'react-native'; import Icon from 'react-native-vector-icons/MaterialIcons'; function FloatingWriteButton() { return ( [ styles.button, Platform.OS .. 2023. 3. 14. [React Native] 3-3 useContext Hooks 함수 Render Props 는 리액트에 Hooks가 없던 시절 유용했고 지금은 그렇게 사용하지 않습니다. (,,,,,,ㅋ) 왜냐하면 리액트에 useContext라는 Hook을 사용하면 Context의 값을 훨씬 간결하게 사용할 수 있습니다. screens/FeedsScreen.js import React, {useContext} from 'react'; import {View, StyleSheet, Text} from 'react-native'; import LogContext from '../contexts/LogContext'; function FeedsScreen() { const value = useContext(LogContext); return ( {value} ); } const styles =.. 2023. 3. 13. [React Native] 3-2 Context API 기존에 네비게이션 기능을 사용하지 않을 때는 데이터를 다른 컴포넌트에 전달하기 위해 Props를 사용했습니다. functionc Couter({ value, conIncrease, onDecrease}) { retrun ( {value} 2023. 3. 13. [React Native] 3-1 다이어리 앱 만들기 앞서 복습하는 겸 작성하는 글들이 있었지만 이젠 그냥 공부하면서 진행하는 것을 올리는게 더 좋을 거 같아 갑자기 뛰어 넘어왔다. 배운걸 종합하여 다이어리 앱을 만드러 볼건데 다룰 내용은 다음과 같습니다. 네비게이션 설정 Context API를 사용한 전역 상태 관리 date-fns를 사용한 날짜 포맷팅 Animated를 사용한 애니메이션 효과 우선 프로젝트를 새로 만들어 줍니다 $ npx react-native init DayLog 그리고 마찬 가지로 App.tsx파일이 만들어졌기 대문에 .js파일로 리팩토링해줍니다. 그후 폴더에 들어가 필요한 라이브러리들을 다운 받겠습니다. cd DayLog yarn add @react-navigation/native @react-navigation/native-sta.. 2023. 3. 10. 이전 1 2 3 4 5 6 다음 반응형
