리액트네이티브 리스트 React Native FlatList Component - #3 (Pull to Refresh )

이전글 보러가기 

 React Native FlatList Component  - #1

 React Native FlatList Component  - #2 

this.state = {
            
            refreshing: false
        };
 
 
 this.setState({
                
                refreshing: false
              });
 
 
 .catch(error => {
            this.setState({error, loading: false});            
   })

state 값에 refreshing 플래그를 추가한다. 데이터를 새로 받아오거나, 오류가난경우 플래그를 false 초기화하는 코드를 추가한다.

<FlatList
              data={this.state.data}
              renderItem={({ item }) => (
                <ListItem
                  roundAvatar
                  title={`${item.name.first} ${item.name.last}`}
                  subtitle={item.email}
                  avatar={{ uri: item.picture.thumbnail }}
                  containerStyle={{borderBottomWidth:0}}
                />
              )}
              
              . . . 
              refreshing={this.state.refreshing}
              onRefresh={this.handleRefresh}
            />

refreshing 값을 state refreshing 값으로 설정하고, onRefresh refresh 메서드를 지정하고 아래와 같이 메서드를 구성한다.

 handleRefresh = () => {
        this.setState(
          {
            page: 1,
            seed: this.state.seed + 1,                         
            refreshing: true
          },
          () => {
            this.makeRemoteRequest();
          }
        );
      };

page 값을 초기화 시키고, refreshing 값을 true로 변환한다. 데이터 조회 함수를 호출한다. 

원문출처

ReactNative Doc FlatList