react-native - 在 React Native 中实现拉取刷新 FlatList

Question

平面列表代码

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

//render return ( <FlatList contentContainerStyle={{ alignSelf: 'stretch' }} data={data.getPosts} keyExtractor={item => item._id} renderItem={this._renderItem} numColumns={3} refresh={ this.state.refreshing} onRefresh={this._handleRefresh} />); } }

用类组件实现

Answer 1

做出改变：

_handelRefresh=async()=>{
            this.setState({refreshing: true})
            this.YOURAPIFunction();
            this.setState({refreshing: false})
        } 
       
    <FlatList 
           contentContainerStyle={{ alignSelf: 'stretch' }} 
           data={data.getPosts} 
           keyExtractor={item => item._id} 
           renderItem={this._renderItem} 
           numColumns={3} 
           refreshing={this.state.refreshing} 
           onRefresh={this._handleRefresh} 
         />