代码之家 › 专栏 › 技术社区 › Yuxiao Ma

如何在React Native中的当前屏幕上显示时主动刷新平面列表?

refresh react-native ios android javascript

Yuxiao Ma · 技术社区 · 7 年前

我正在使用 <FlatList> 堆栈导航器 用于屏幕之间的导航。现在我试着让 <平面列表> 每当用户导航回主屏幕时,从后端重新提取数据并重新发送。

<平面列表> 应该从后端引用并重新加载以显示最新数据。(将最近的频道重新排序到顶部等)

现在实现了pull to refresh,但问题是如何知道用户已导航回主屏幕,以及如何主动调用refresh < 当这种情况发生时。

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

1 回复 | 直到 7 年前

Khalil Khalaf 7 年前

当导航到ChatDetails屏幕时,可以将回调作为导航参数传递:

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

因此 console.log() ,做你的 fetch() 或者/或者你想要的任何东西。

推荐文章

Kris B · “AmbientLifecycleObserver”是抽象的;无法实例化

1 年前

Jorpy · 如何在Jetpack Compose中设置按钮高度和宽度?

1 年前

Tartar · 水平边距不适用于按流垂直对齐的ConstraintLayout中的项目

1 年前

Abhilash Das · 输入文本时,编辑文本与工具栏重叠

1 年前

Community wiki · Android ADB设备离线,无法发出命令

1 年前

Community wiki · 使用alarmamanager的numberformat异常-启动前崩溃

1 年前

Community wiki · 局部变量可能尚未初始化

1 年前

Community wiki · 无法从同一局域网内的远程机器访问Android设备

1 年前

jvargas · 如何获取上个月的第一天和最后一天以及一年的第一天

1 年前

Raj Narayanan · 图标按钮内部可绘制的图标是黑色的,尽管它是白色的

2 年前