ReactNative23 [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. 이전 1 2 3 4 5 6 다음 반응형
