제대로하지 않으면 VirtualizedList 가상화를 활용할 수 없습니다.
RN으로 만드는 화면 레이아웃, NavigationBar 및 TabBar를 제외하고 VirtualizedList가있는 or 스크롤이없는 두 가지 패턴 만 있습니다. moriyuu (@moriyuu__).
라고 생각했다.
같은 레이아웃의 (아래로 스크롤 한 후 콘텐츠가 늘어서 있음) 사용자 세부 정보 화면이 있으면
A
const UserPage = () => {
return (
<ScrollView>
<ProfileComponent />
<FlatList
data={tweets}
renderItem={renderItem}
/>
</ScrollView>
)
}
대신
B
const UserPage = () => {
return (
<FlatList
ListHeaderComponent={<ProfileComponent />}
data={tweets}
renderItem={renderItem}
/>
)
}
라고 만든다.
A 로 만들어 버릴 것 같지만, 이것에서는 FlatList 는 잘 가상화되지 않고, 렌더링의 퍼포먼스가 최적화되지 않는다.
A, B 각각의 renderItem 중에서 console.log 하는 등해, 화면보다 대부분 아래쪽의 item 가, 화면을 스크롤 하기 전의 단계로 렌더링 되어 있을지 어떨지를 확인할 수 있다. A 라고 렌더링 되어 버리지만, B 라고 그 item 의 근처까지 스크롤 하지 않으면 렌더링 되지 않는다.
나중에 onEndReached 라든지 사용할 수 없네요
참고
Reference
이 문제에 관하여(제대로하지 않으면 VirtualizedList 가상화를 활용할 수 없습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/moriyuu/items/b79f5b30576649305e26텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
