원문 : https://facebook.github.io/react-native/docs/flatlist
renderItem({item, index, separators})
data 데이터를 출력할 함수
data
<Array> 출력할 리스트 배열
ItemSeparatorComponent
renderItem 아이템 중간에 들어갈 수 있는 컴포넌트
ItemSeparatorComponent
아이템 사이에 들어가면 최상위 하위는 들어가지 않는다.
renderItem 과 함께 연동해서 사용이 가능하다.
- separators.highlight
- separators.unhighlight
- separators.highlighted
- separators.updateProps
ListEmptyComponent
목록이 비었을때 랜더링 (컴포넌트)
ListFooterComponent
ListFooterComponentStyle
리스트 맨아래 랜더링 (컴포넌트)
ListHeaderComponent
ListHeaderComponentStyle
리스트 맨위에 랜더링 (컴포넌트)
columnWrapperStyle
리스트가 가로인 경우horizontal=true 에 사용 가능하다는데아무리 해봐도 무슨 기능인지 모름
extraData
목록을 다시 랜더링 하도록 알리기위한 마커
getItemLayout = {(data, index) => {length: 0, offset: 0, index: 0}}
getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}높이 최적화
horizontal
가로로 랜더링함
initialNumToRender
초기 배치에서 랜더링할 항목 수
initialScrollIndex
첫번째가 아닌 시작 번호를 부터 랜더링을 한다.
inverted
출력방향 설정 기본(false) 위->아래, (true) 아래 -> 위
keyExtractor={(item, index) => string}
리액트 key 로 사용될 값
nymColumns
값(숫자) 만큼 가로로 출력하고 다음열로 넘어간다.
onEndReached
스크롤 위치가 onEndReachedThreshold 에 도착하면 한번 호출한다.
onEndReachedThreshold
onEndReached 콜백을 트리거 하기위한 값 목록의 중간은 0.5
onRefresh
refreshing
사용하려면'refreshing' 값이 셋팅이 되야하며
refreshing={false} 로 셋팅하면 "Pull to Refresh" 가 작동된다.
onViewableItemsChanged
viewabilityConfig
viewabilityConfigCallbackPairs
viewabilityConfig 에따라 아이템의 가시성이 변경될때 호출
progressViewOffset
legacyImplementation
디버깅및 성능 비교
removeClippedSubviews
큰목록 성늘 향상 (컨텐츠 누락) 버그가 있을수 있음 위험 감수
- scrollToEnd([param]) : 컨텐츠 스크롤 끝으로 이동
- scrollToIndex(param) : 컨텐츠 스크롤 이동 (0: 앞, 0.5: 가운데, 1: 끝)
- scrollToItem(param) : 아이템으로 스크롤 이동
- scrollToOffset(param) : 스크롤할 오프셋
- recordInteraction() : 상호 작용 발생한 목록
- flashScrollIndicators() : 스크롤 표시기를 잠깐 표시함
- () : 기본 스크롤 응답기 핸들 제공
- getScrollableNode() :
param = {
animated: true,
index: 3,
viewOffset: 2,
viewPosition: 0.5
}