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

【问题标题】：How to actively refresh a FlatList whenever it shows on the current screen in React Native?如何在 React Native 的当前屏幕上显示 FlatList 时主动刷新？
【发布时间】：2018-03-26 01:59:09
【问题描述】：

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

例如，用户进入聊天频道，应用导航到聊天详细信息屏幕，用户在那里发送一些消息，当用户按下后退按钮并导航回到主聊天频道列表屏幕时，@ 987654323@ 应该从后端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>
  )
}

【问题讨论】：

标签： javascript android ios react-native refresh

【解决方案1】：

当您导航到 ChatDetails 屏幕时，您可以将回调作为导航参数传递：

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

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

【讨论】：