1

我正在构建一个使用ReduxReact-Navigation库的应用程序。我在 FlatList 中有一个锻炼列表:

<FlatList
    style={{ backgroundColor: colors.background }}
    data={this.props.workoutsList}
    renderItem={({ item }) =>
      <ListItem workout={item} onPress={() => this.props.navigation.navigate('Workout', item)} />
    }
    keyExtractor={(item) => item.id}
  />

这正确显示了我的列表,我可以导航到我单击的每一行的特定锻炼页面,并在每次单击时提供附加的锻炼。在这个特定的锻炼页面上,我有一个编辑锻炼表单,例如,用户可以在其中更新锻炼的名称和时间。

所有这一切都没有问题......当我按下菜单上的后退按钮时,我遇到的问题将我带回到所有锻炼的主列表。FlatList 仍然显示旧数据,是我的问题的根源。它正在缓存这些数据,因此不会显示我的新保存,因此当我再次单击列表项时,它会附加旧的锻炼信息而不是我刚刚保存的最新信息。(希望这是有道理的)

我看到了一个有点类似的问题:React Navigation: How to update navigation title for parent, when value from redux and get updated in child? 但它并没有完全概括我的主要问题:

FlatList 是否可以从 redux 设置中更新特定行,同时保持其滚动位置?

我看到这在 Facebook 应用程序上运行得非常好......当有人向下滚动他们的墙时,假设他们点击了“xx 评论”的项目。这会将应用导航到仅显示此帖子的页面。您可以点赞/评论,当您按下后退箭头时,您会回到原来的墙的滚动位置,并且点赞/评论的数量已更新以显示您的贡献。这在 React Native 中可行吗?

如果这是不可能的......有没有人知道从 React-Navigation 中的后退按钮导航时如何至少刷新页面?

编辑如果其他地方有更好的设置,我愿意使用另一个导航库!

更新 我尝试了几种方法来解决这个问题,我尝试的一种方法是:

当我成功保存表单时,我发送了一个“NEEDS_REFRESHING”操作。这设置了我在 FlatList 主页面上获取的 redux 道具。在该页面的渲染中,我有一个:

if (this.props.needsRefreshing) {
  console.log('Needs Refreshing');
  this.props.getWorkouts();
}

我看到了控制台,并且我的 FlatList 页面正在正确刷新(它没有让我回到正确的滚动位置,因为它只是刷新了主列表)......但我总是收到来自 React Native 的警告说:

在现有状态转换期间无法更新(例如在 render或另一个组件的构造函数内)。渲染方法应该是 props 和 state 的纯函数;构造函数副作用是一种反模式,但可以移至componentWillMount.

当我将其移至 componentWillMount 时,从未调用过正确的刷新更改,甚至 componentWillMount 中的 console.log 也不会出现。

4

1 回答 1

0

您是否尝试过scrollToIndex(params: object)方法?https://facebook.github.io/react-native/docs/flatlist.html#scrolltoindex

而且,如果您想更新 flatList 中的数据,您应该在 Props https://facebook.github.io/react-native/docs/flatlist.html#extradata中添加extraData

如果你使用 react-navigation goBack() 到一个屏幕,那个屏幕永远不会触发 componentWillMount 因为这个屏幕永远不会卸载,所以请改用 redux。

于 2017-06-09T14:34:29.850 回答