FlatList 새로 고치기 구현 구현

Question

내 응용 프로그램을 새로 고치기 위해 당겨서 구현하도록 도와주세요. 네이티브로 반응하는 새로운 방법입니다. 감사합니다. onRefresh를 처리하고 새로 고치는 방법을 모르겠습니다.

class HomeScreen extends Component { 
    state = { refreshing: false } 

    _renderItem = ({ item }) => <ImageGrid item={item} /> 

    _handleRefresh =() => { 

    }; 

    render() { 
    const { data } = this.props; 
    if (data.loading) { 
     return (
     <Root> 
      <Loading size="large" /> 
     </Root> 
    ) 
    } 
return (
    <Root> 
    <HomeHeader /> 
    <FlatList 
     contentContainerStyle={{ alignSelf: 'stretch' }} 
     data={data.getPosts} 
     keyExtractor={item => item._id} 
     renderItem={this._renderItem} 
     numColumns={3} 
     refreshing={this.state.refreshing} 
     onRefresh={this._handleRefresh} 
    /> 
    </Root> 
); 
} 
} 

export default graphql(GET_POSTS_QUERY)(HomeScreen); 

Answer 1

개념 목록을 수동 따라서 갱신 될 수있다 (예를 들어 서버로부터 페치) 현재 뷰 외부에서 변경 될 수 있음을 의미하는 "새로 풀". 따라서 콜백 onRefresh은 데이터 리로딩 프로세스를 트리거 (예 : 서버에 요청 보내기)하고 refreshing 변수를 true 값으로 설정해야합니다. 이렇게하면로드 표시기를 표시하여 프로세스가 시작되었음을 사용자에게 알립니다. 데이터 준비가 완료되면 refreshing을 위조로 설정해야 뷰에서 로딩 표시기를 숨길 수 있습니다.

Answer 2

내가 할 수있는 최선의 방법입니다. my Code Image

서버에서 데이터를 다시 가져 오지 않습니다. 응용 프로그램에 Apollo로 연결된 graphql 서버를 실행 중이며 _getData() 함수에서 서버에서 데이터를 가져 오는 방법을 모르겠습니다. 그것은 기본적으로 하나 althouth 당신이 소품`onRefresh`을 설정하면

Answer 3

당신은 또한 Flatlist있는 ScrollView 및 기타 목록 구성 요소

<FlatList 
     contentContainerStyle={{ alignSelf: 'stretch' }} 
     data={data.getPosts} 
     keyExtractor={item => item._id} 
     renderItem={this._renderItem} 
     numColumns={3} 
     refreshControl={ 
      <RefreshControl 
      refreshing={this.state.refreshing} 
      onRefresh={this._handleRefresh} 
      /> 
     } 
    />