实现拉取刷新 FlatList [英] Implement pull to refresh FlatList

问题描述

请帮助我在我的应用程序上实现拉动刷新，我对本机反应有点新，谢谢.我不知道如何处理onRefresh和刷新.

please help me out to implement pull to refresh on my app, I'm kinda new to react native, thanks. I don't know how to handle onRefresh and refreshing.

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);

推荐答案

设置变量

this.state = { 
    isFetching: false,
}

创建刷新函数

onRefresh() {
    this.setState({isFetching: true,},() => {this.getApiData();});
}

最后设置onRefresh并在FlatList中刷新.

And in last set onRefresh and refreshing in FlatList.

<FlatList
    data={ this.state.FlatListItems }
    onRefresh={() => this.onRefresh()}
    refreshing={this.state.isFetching}
/>

在getApiData函数中获取数据后确保设置false isFetching.

After fetching Data in function getApiData Make sure to set false isFetching.

this.setState({ isFetching: false })

这篇关于实现拉取刷新 FlatList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！