React Native Navigation更新数据

时间:2017-05-30 00:08:59

标签: react-native redux react-navigation react-native-flatlist

我正在构建一个应用,我正在使用 Redux React-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}
  />

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

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

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

FlatList可以从redux设置更新特定行,同时还能保持其滚动位置吗?

我认为这在Facebook应用程序上工作非常好....当有人滚动他们的墙,让我们说他们点击“xx评论”项目。这会将应用程序导航到仅显示此帖子的页面。您可以喜欢/评论,当您按下后退箭头时,您将完全回到之前的墙的滚动位置,并且已更新喜欢/评论的数量以显示您的贡献。这在React Native中是否可行?

如果无法做到这一点......在React-Navigation中从后退按钮导航时,是否有人知道如何至少刷新页面?

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

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

当我成功保存表单时,我发送了一个'NEEDS_REFRESHING'的动作。这设置了我在主FlatList页面上选择的redux prop。在该页面的渲染中,我有一个:

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

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

  

在现有状态转换期间无法更新(例如在   render或其他组件的构造函数)。渲染方法应该是   道具和国家的纯粹功能;构造函数的副作用是一个   反模式,但可以移动到componentWillMount

当我将其移动到componentWillMount时,正确的刷新更改从未被调用,甚至componentWillMount中的console.log也不会显示。

1 个答案:

答案 0 :(得分:0)

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

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

如果您对屏幕使用react-navigation goBack(),那么该屏幕将永远不会触发componentWillMount,因为此屏幕永远不会卸载,所以请改用redux。