전체 글125 [React Native] 3-11 검색 기능 구현하기 (1) 이제 검색 기능을 만들려면 헤더 부분에 텍스트를 입력하여야 함으로 헤더를 커스터마이징해야 합니다. MainTab 컴포넌트에서 화면에 따라 제목을 다르게 설정하기 위해 getHeaderTitle라는 함수를 만들었습니다. 네이티브 스택 네비게이터의 headerTitle 옵션에는 문자열이 아닌 JSX를 넣어줄수도 있습니다. 우선 SearchHeader 컴포넌트를 생성하겠습니다. conponents/SearchHeader.js import React from 'react'; import {View, StyleSheet, Text} from 'react-native'; function SearchHeader() { return Hello; } const styles = StyleSheet.create({ bloc.. 2023. 3. 27. [React Native] 3-10 삭제 기능 구현하기 context/LogContext.js import {createContext, useState} from 'react'; import React from 'react'; import {v4} from 'uuid'; const LogContext = createContext(); export function LogContextProvider({children}) { (...) const onModify = modified => { const nextLogs = logs.map(log => (log.id === modified.id ? modified : log)); setLogs(nextLogs); }; // ----추가 ---- const onRemove = id => { const nextLogs =.. 2023. 3. 26. [React Native] 3-9 작성한 글을 WriteScreen으로 열기 이제 앞으로 만들 기능은 다음과 같습니다. 수정하기 삭제하기 검색하기 달력 보여주기 수정하기와 삭제하기 기능을 구현하기에 앞서 사용자가 FeedList에서 항목을 눌렀을 때 WriteScreen을 띄워서 기존에 작성한 내용을 보여주는 기능을 구현하겠습니다. components/FeedListItem.js import React from 'react'; import {Platform, Pressable, StyleSheet, Text, View} from 'react-native'; import {format, formatDistanceToNow} from 'date-fns'; import {useNavigation} from '@react-navigation/native'; //추가 (..) functi.. 2023. 3. 20. [React Native] 3-8 스크롤 내렸을 때 글쓰기 버튼 숨기기 스크롤을 내렸을 때 글쓰기 버튼을 숨기기 위해서는 일단 스코롤이 FlatList의 바닥에 가까워졌는지 감지할 수 있어야합니다. { console.log("바닥에 가까워 졌음") }} onEndReachedThreshold={0.85} > 이렇게 하면 콘텐츠의 85% 스크롤 했을 때 onEndReached 함수가 호출 됩니다. 스크롤로 많은 정보를 불로으는 무한스크롤을 구현할 때 이 Props 를 사용하면 유용한데 저희는 아직 사용하지 못합니다. 그래서 저희는 onEndReached를 사용하는 대신 onScrool 이벤트를 사용할 것입니다. onScroll 이벤트를 사용하면 콘텐츠의 전체 크기와 스크롤의 위치를 알아낼 수 있습니다. components/FeedList.js import React from .. 2023. 3. 18. [React Native] 3-7 Animated로 애니메이션 적용 지금 FeedList에는 사용자 경험과 관련해 한 가지 문제가 있습니다. 내용이 많아지면 우측 하단의 버튼이 항목의 내용을 가리게 됩니다. 이 문제를 해결 하기 위해선 사용자가 스크롤을 최하단으로 내릴 때 해당 버튼을 숨겨야됩니다. 애니메이션 연습히기 리액트 네이티브에서 에니메이션을 구현할 때는 animated라는 객체를 사용합니다. import React,{useRef} from 'react'; import {Animated} from 'react-native'; function Sample() { const animation = useRef(new Animated.Value(1)).current } Value를 만들 때는 이렇게 useRef를 사용해야 합니다. 이전엔 컴포넌트 레퍼런스에 포커스를 줄 .. 2023. 3. 17. [React Native] 3-6 글 목록 보여주기 FeedListItem 컴포넌트 만들기 먼저 FeedListItem 컴포넌트를 만들어야 합니다. 이 컴포넌트는 log 객체를 Props로 받아와서 알맞은 위치에 보여줄 것 입니다. 글 목록에서 화면에 body를 보여줄 때는 전체 내용을 보여주지 않습니다. 줄 바꿈 문자를 모두 없애야하고, 길이가 100자 이상이면 줄임표를 사용해야합니다. 이런 작업을 하는 truncate라는 함수도 따로 선언해주겠습니다. 그리고 추후 이 항목을 선택하려면 WriteScreen을 다시 띄워서 전체 내용을 볼 수 있게 해줘야 하기 때문에 Pressable 컴포넌트도 사용할 것입니다. components/FeedListItem.js import React from 'react'; import {Platform, Pressabl.. 2023. 3. 16. [React Native] 3-6 LogContext로 배열 상태 관리하기 이제 WriteScreen 우측 상단의 체크 버튼을 누르면 현재 작성한 제목과 내용을 LogContext 안의 배열에 추가하는 기능을 구현해보겠습니다. 기존에 LogContext에서 만든 text 상태는 지우고 logs라는 배열을 useState로 상태 관리 하겠습니다. 그 다음에 LogContext.Provider의 value에 이 logs 배열을 객체로 감싸서 넣겠습니다. 객체로 감싸는 이유는 추후 logs 배열 외에도 상테에 변화룰 주는 다른 함수가 들어가기 때문입니다. comtexts/LogContext.js import {createContext, useState} from 'react'; import React from 'react'; const LogContext = createContext.. 2023. 3. 15. [React Native] 3-5 useRef로 컴포넌트 래퍼런스 선택하기 useRef는 함수 컴포넌트 에서 컴포넌트의 래퍼런스를 선택 할 수 있게 하는 Hook입니다. 제목을 입력후 Enter을 누르면 포커스를 이동시키고 싶다면 이럴 때는 내용의 TextInput의 래퍼런스를 포커스 해줘야합니다 componets/WriteEditor.js import React, {useRef} from 'react'; import {View, StyleSheet, TextInput} from 'react-native'; function WriteEditor({title, body, onChangeTitle, onChangeBody}) { const bodyRef = useRef(); return ( ); } const styles = StyleSheet.create({ block: { fl.. 2023. 3. 15. [React Native] 3-4 WriteScreen 준비하기 screens/RootStack.js import React from 'react'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import MainTab from './MainTab'; import WriteScreen from './WriteScreen'; const Stack = createNativeStackNavigator(); function RootStack() { return ( ); } export default RootStack; 일단 WriteScreen의 기본적으로 보이는 헤더를 숨겼습니다. 다음으론 WriteScreen에서 사용할 헤더를 직접 만들겠습니다. components/WriteHea.. 2023. 3. 14. 이전 1 2 3 4 5 6 ··· 14 다음 반응형
