TIL: RN | FlatList renderItem data type, refeshControl

Lumpen·2023년 1월 27일
0

TIL

목록 보기
221/244
post-custom-banner

FlatList data type

flat list 에 전달될 renderItem 의 데이터 타입은
item 이라는 프로퍼티 키를 가진 객체 형태가 되어야 한다


type DataType = {
  	id: number
    name: string
}

type RenderItemType = {
  item: DataType;
};

const renderItem = ({ item }: RenderItemType) => {}
const data: DataType[] = [{id: 1, name: 'name'}, {id: 2, name: 'name'}
  

refreshControl

ScrollView 나 FlatList 등의 리스트 구조를 갖는 컴포넌트에는
refreshControl 속성을 사용할 수 있다

해당 속성에 react native 의 refreshControl 컴포넌트를 넣어줄 수 있다

import {refreshControl, FlatList} from 'react-native';

<FlatList
        data={streamList}
        renderItem={renderItem}
        refreshControl={
          <RefreshControl
            style={{ borderColor: 'black' }}
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
  />
profile
떠돌이 생활을 하는. 실업자, 부랑 생활을 하는
post-custom-banner

0개의 댓글