react-native – FlatList组件生命周期方法ScrollToIndex Scroll
|
我正在使用新的
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(将偏移设置为要滚动到的项目的偏移量),我只设法使用变量高度.这有明显的性能问题,如果您有长列表或您的项目具有复杂的渲染,这实际上并不理想. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |