생각은 길게 코딩은 짧게

[React-Native] FlatList 새로고침 ( Page Refresh ) 본문

React Native

[React-Native] FlatList 새로고침 ( Page Refresh )

sayhee 2022. 11. 18. 17:54
728x90

상품등록 후 홈의 등록 된 상품 리스트 화면에서 등록 된 상품들이 갱신이 되기 위해 Refresh 기능이 필요하였다


constructor(props){
	this.state={ refreshing : false }
}

- 초기 렌더링 시에는 사용자로부터 refresh 이벤트를 받지 않았음으로 false로 지정

//데이터 가지고오는 함수
_getData = () => {
   this.callGetRepairAPI().then((response) => {
       this.Contents = response;
       this.setState({ goodsContent: response });
   });
   console.log('refresh success')
   this.setState({ refreshing: false })
}

- 새로고침이 되었을 때 데이터를 가져올 함수 구현

 //새로고침
_handleRefresh = () => {
    this.setState({
        refreshing: true,
    }, this._getData);
}

- 새로고침이 될 때 refreshing의 값을 true로 setState 해주고 getData 함수를 호출

<FlatList
    data={this.state.goodsContent}
    renderItem={({ item }) => <GetImages item={item} />}
    refreshing={this.state.refreshing}
    onRefresh={this._handleRefresh}
/>

- onRefresh 속성으로 전달한 함수는 핸드폰 화면을 아래로 당길 때 실행