분류 전체보기125 [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. 이전 1 ··· 3 4 5 6 7 8 9 ··· 32 다음 반응형
