일 년 전 · 익명 님의 질문
리액트 네이티브 flatlist 관련 질문 받아주실 분 있으실까요?
제가 리액트 네이티브로, 위아래로 슬라이드 하면 한 달씩 넘어가는 캘린더를 만들고 있습니다. 그래서 전체를 FlatList로 만들고 스크롤 시 y인덱스를 받아와서 한 달씩 랜더하는 식으로 코드를 구현하였습니다. const handlePageChange = (newPage: number) => { if(newPage !=0) { const newDate = new Date(currentDate); newDate.setMonth(newDate.getMonth() + newPage); setCurrentDate(newDate); } }; return ( <FlatList data={[...Array(1).keys()]} keyExtractor={(item) => item.toString()} renderItem={({ item }) => ( <CalendarMonth currentDate={{ currentDate }} ClickedDate={{ ClickedDate }} setClickedDate={setClickedDate} /> )} horizontal={false} pagingEnabled= {true} showsVerticalScrollIndicator={false} scrollEventThrottle={100000} onScrollEndDrag={(event) => { const offset = event.nativeEvent.contentOffset.y; const direction = offset === 0 ? 0 : offset > 0 ? 1 : -1; handlePageChange(direction); }} /> ); 이런 식으로 코드를 구현하였는데 위로 잡아 올렸을 때 빈칸이 보이는데 저는 스크롤 시 모션은 보이지 않고 바로 다음 달력으로 넘어갔으면 합니다. 혹시 스크롤 시에 달력이 움직이지 않고 바로 넘어갈 수 있는 방법이 있을까요?
개발자
#react-native
답변 0
댓글 0
조회 60
2년 전 · 커리어리 AI 봇 님의 새로운 답변
React Native FlatList 스크롤바만 z-index가 가능할까요??
현재 React Native로 개인 프로젝트 구현중에 특정 영역을 Scroll Y위치에 맞춰서 position absolute를 띄워 z-index를 높여 보여주게 만들었으나 FlatList scrollbar까지 가려서 UX상 좋지 않은 경험을 보여주어 이부분을 수정하기 위해 여러 서치를 하였으나 아직 방법을 찾지 못하였습니다.. 혹시 선배님들께서 관련하여 해결한 사례가 있는지 공유 부탁드립니다!
개발자
#react-native
#flatlist
#animated
답변 1
댓글 0
추천해요 1
보충이 필요해요 1
조회 400
2년 전 · 범진 님의 새로운 답변
react-native FlatList 너무 느림 현상
리액트 네이티브에서 Flatlist로 구현된 채팅 메세지가 너무 느립니다. 신기하게 안드로이드에서만 느리고 ios는 또 멀쩡하게 잘되더라구요. 짧은 메세지들은 잘되는데 메세지들이 조금만 길어지면 버벅거리는 현상이 심하더라고요. 혹시 원인을 알고 계신분 있나요? FlatList 구현자체는 몇몇개의 prop 더 해진거 말고는 공식문서 예시와 거의 동일합니다. - https://reactnative.dev/docs/flatlist
개발자
#react-native
#flatlist
#android
답변 2
댓글 1
조회 868
2년 전 · 강병진 님의 새로운 답변
react-native flatlist 리렌더링
react-native flatlist의 renderItem으로 넘겨주는 데이터를 변경했는데 flatlist에 변경사항이 반영되지 않습니다. flatlist를 리렌더링하거나 변경사항을 반영하는 방법이 있을까요? props 같은 것을 넘겨주는 컴포넌트가 아니라서 어떻게 해야할지 모르겠습니다.
개발자
#react
#react-native
답변 1
댓글 0
추천해요 1
조회 257
2년 전 · 이은재 님의 새로운 답변
React native의 FlatList가 스크롤 되지 않습니다.
React Native에서 아래처럼 ScrollView 안에 여러 FlatList 컴포넌트를 갖는 구조를 만들었는데요 내부의 FlatList 들이 스크롤이 되지 않습니다. 해결방법 아시는 분 계실까요 ㅠㅠ??
개발자
#react-native
답변 1
댓글 0
조회 622
2년 전 · 커리어리 Q&A 운영자 님의 새로운 댓글
FlatList가 너무 느려요...
안녕하세요. 이미지를 무한대로 보여주는 인피니트 스크롤 형식의 피드 화면이 있는데, 이미지 컨테이너를 FlatList로 보여주고 있습니다. 그런데 너무 느리고 버벅거리는 것 같아요. 이미 https://reactnative.dev/docs/optimizing-flatlist-configuration 공식 문서의 방법대로 했는데도 버벅거림이 해결되지 않습니다. 이미지 컨테이너에는 저장하기, 좋아요, 공유하기 정도의 버튼들이랑 좋아요한 사람 프로필 이미지와 문구 정도가 있습니다. 혹시 FlatList 최적화 해보신 분 계시면 방법 공유해주실 수 있나요?
개발자
#프론트엔드
#리액트
#네이티브
답변 1
댓글 1
추천해요 3
조회 460
2년 전 · 엄홍재 님의 답변 업데이트
react-native를 사용하는데 scrollbar가 이상합니다.
안녕하세요 개인적으로 하는 앱 만들기 프로젝트를 하고 있는데요. react-native의 FlatList를 이용해서 여러가지 정보를 보여주려고 합니다. 그런데 스크롤바가 오른쪽 끝이 아닌 가운데에 나타나고 있어요. 혹시 해결방법이 있을까요?!
개발자
#프론트엔드
#리액트
답변 2
댓글 2
추천해요 3
조회 211
2년 전 · 커리어리 Q&A 운영자 님의 새로운 댓글
RN FlatList의 loader가 늦게 표시되는데 개선할 방법이 있을까요?
React Native의 FlatList를 이용해서 무한스크롤 목록을 만들었습니다. 데이터는 react-query의 useInfiniteQuery를 이용해서 가져오고 있고요. FlatList의 ListFooterComponent와 react-query의 isFetchingNextPage 값을 이용해서 다음 목록을 가져올 때 목록 하단에 loader를 표시해주고 있는데 loader가 늦게 나타납니다. (코드 사진 첨부합니다.) loader가 나타나는 속도를 개선할 수 있는 방법이 있을까요?
개발자
#프론트엔드
#react
답변 1
댓글 1
추천해요 1
조회 178