How to set Refresh Indicator of FlatList in react native?

问题

I'm trying to set the refresh indicator of flat list in react native but don't know how to do it. List View has this prop :

refreshControl={<RefreshControl
                        colors={["#9Bd35A", "#689F38"]}
                        refreshing={this.props.refreshing}
                        onRefresh={this._onRefresh.bind(this)}
                    />
                }

But Flat List has only these :

refreshing={this.props.loading}
onRefresh={this._onRefresh.bind(this)}

回答1:

I found the solution! It might be the dummy but FlatList also has a prop called refreshControl like ListView but I just didn't test it! Just like this:

refreshControl={
    <RefreshControl
        colors={["#9Bd35A", "#689F38"]}
        refreshing={this.props.refreshing}
        onRefresh={this._onRefresh.bind(this)}
    />
}

回答2:

You can pass in the renderScrollComponent to your FlatList component with the same RefreshControl component you have showed above. I have created a expo snack for this: https://snack.expo.io/rJ7a6BCvW

The FlatList is using VirtualizedList within itself, and for VirtualizedList component, it takes a renderScrollComponent: https://facebook.github.io/react-native/docs/virtualizedlist.html#renderscrollcomponent

来源：https://stackoverflow.com/questions/45659610/how-to-set-refresh-indicator-of-flatlist-in-react-native