如何在React Native的当前屏幕上显示时主动刷新FlatList？

我正在使用React Native创build一个实时聊天应用程序。 我在主屏幕上使用<FlatList>作为聊天频道列表，并使用StackNavigator在屏幕之间进行导航。 现在，我试图让<FlatList>从后端重新获取数据，并在用户导航回到主屏幕时重新提交数据。

一个例子是用户进入聊天频道，应用程序导航到聊天细节屏幕，用户在那里发送一些消息，当用户按下后退button并导航回到主聊天频道列表屏幕时， <FlatList>应该从后端重新展现，重新展现最新的数据。 （将最近的频道重新排列在最上面等等）

现在拉刷新实施，但问题是我怎么知道用户已导航回到主屏幕，以及如何积极调用刷新<FlatList>发生时。

这是我的一些代码：

  onRefresh = async () => { const { data } = this.props try { this.setState({ refreshing: true }) await data.refetch({ page: 1 }) } catch (e) { // todo } finally { this.setState({ refreshing: false, }) } } const NudgeList = ({ nudges, loading, refreshing, onRefresh, }) => { let inner if (loading && !refreshing && !fetchingMore) { inner = ( <View style={styles.center}> <ActivityIndicator animating /> </View> ) } else { inner = ( <FlatList onRefresh={onRefresh} refreshing={refreshing || false} scrollEventThrottle={400} data={nudges} renderItem={({ item }) => ( <NudgeCard nudge={item} {...{ onOpenNudge }} /> )} /> ) } return ( <View style={styles.container}> {inner} </View> ) } 

Answer 1

当您导航到ChatDetails屏幕时，您可以将callback作为导航parameter passing：

 this.props.navigation.navigate( 'ChatDetails', { onGoBack: () => console.log('Will go back from ChatDetails'), } ); 

所以，而不是console.log() ，做你的fetch()或/和任何你想要的。