在 react native 中返回时如何使用 flatlist 保持滚动位置？

Question

我是新来的本地人。向前导航然后返回到该屏幕时，我在保持平面列表的位置时遇到问题。

当前行为

向前导航然后向后导航时，滚动位置会丢失。

预期行为

当浏览大量项目列表时，用户向下滚动列表并单击某个项目。该应用程序会转到显示产品详细信息的下一页。如果用户决定向后导航，则页面不会滚动到前一点。

原文由 Pulkit Aggarwal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试处理状态下滚动位置的变化：

 <FlatList onScroll={this.handleScroll} />

句柄滚动 方法：

 handleScroll: function(event: Object) {
 this.setState({ scrollPosition: event.nativeEvent.contentOffset.y });
}

然后您可以在返回时使用 scrollToOffset(this.state.scrollPosition) 。

如果你使用 react-navigation 并想在导航后保持滚动位置，试试这个 hack：

 componentDidMount() {
  this.props.navigation.addListener('willBlur', () => {
    const offset = this.state.scrollPosition
    // To prevent FlatList scrolls to top automatically,
    // we have to delay scroll to the original position
    setTimeout(() => {
      this.flatList.scrollToOffset({ offset, animated: false })
    }, 500)
  })
}

原文由 Marcos Demétrio 发布，翻译遵循 CC BY-SA 4.0 许可协议