当前位置 : 主页 > 网页制作 > React >

react-native – FlatList组件生命周期方法ScrollToIndex ScrollToEnd等

来源:互联网 收集:自由互联 发布时间:2021-06-15
我正在使用新的 FlatList component,并希望在诸如componentDidMount的生命周期方法中使用ScrollToIndex(或ScrollToEnd). 我有一个让我们说100个项目的数组,我不想开始渲染第一个项目,但在开始时.让我
我正在使用新的 FlatList component,并希望在诸如componentDidMount的生命周期方法中使用ScrollToIndex(或ScrollToEnd).

我有一个让我们说100个项目的数组,我不想开始渲染第一个项目,但在开始时.让我们说第50项.当FlatList一次只显示一个项目时,它正如所需的那样工作,如下所述:https://github.com/facebook/react-native/issues/13202

componentDidMount() {
  let wait = new Promise((resolve) => setTimeout(resolve, 500));  // Smaller number should work
  wait.then( () => {
    this.refs.flatlist.scrollToIndex({index: 4, animated: true});
  });
}

此片段使scrollToIndex在调用componentDidMount几毫秒后运行.

但是当我使用FlatList,其中视图包含3×3网格时,我根本无法使其运行.当我使用scrollToIndex并且索引在指定的props initialNumToRender之外时,我只得到一个错误scrollIndex超出范围$ID,我无法理解.提供的数据数组具有所有例如100个项目.当我创建scrollToEnd时,它只会停在两者之间而不是最后.对我来说,它看起来像某种bug,我不知道如何在初始渲染后滚动到$X项目.你能帮助我吗?

我很感激任何形式的帮助或评论.

我在iOS和Android(模拟器和设备)上尝试了React-Native v0.43.0和v0.44.0,它总是一样的.

你在FlatList上设置一个getItemLayout道具吗?

检查它在React Native代码中的含义forscrollToIndex – https://github.com/facebook/react-native/blob/master/Libraries/Lists/FlatList.js#L308

这只有在您的物品具有设定高度时才能真正起作用.似乎对于具有可变高度的物品没有适当的解决方案.通过设置initialNumToRender = {indexToScrollTo 1}然后使用scrollToOffset而不是scrollToIndex(将偏移设置为要滚动到的项目的偏移量),我只设法使用变量高度.这有明显的性能问题,如果您有长列表或您的项目具有复杂的渲染,这实际上并不理想.

网友评论