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

Question

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

一个例子是用户进入聊天频道，应用程序导航到聊天详细信息屏幕，用户在那里发送一些消息，当用户按下后退按钮并导航回主聊天频道列表屏幕时， <FlatList> 应该从后端 refectch 并重新呈现自身以显示最新数据。（将最近的频道重新排序到顶部等）

现在实现了下拉刷新，但问题是我如何知道用户已导航回主屏幕以及如何在 <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

导航到聊天详细信息屏幕时，您可以将回调作为导航参数传递：

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

所以，不要 console.log()，而是 fetch() or/and 随心所欲。

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

How to actively refresh a FlatList whenever it shows on the current screen in React Native?

javascript

android

refresh

ios

react-native