FlatList 组件生命周期方法 ScrollToIndex ScrollToEnd 等 [英] FlatList Component Life Cycle Methods ScrollToIndex ScrollToEnd etc

问题描述

我正在使用新的 FlatList 组件 并希望在诸如 componentDidMount 之类的生命周期方法中使用 ScrollToIndex(或 ScrollToEnd).

I am using the new FlatList component and want to make use of ScrollToIndex (or ScrollToEnd) within lifecycle methods such as componentDidMount.

我有一个假设为 100 个项目的数组，我不想在第一个项目处开始渲染，而是在开始时开始渲染.让我们说第 50 项.当 FlatList 一次只显示一个项目时，它会像这里描述的那样通过一些 hack 按需要工作:https://github.com/facebook/react-native/issues/13202

I have an array of let's say 100 items and I don't want to start to render at the first item but in the beginning. Let's say at the 50th item. When the FlatList is only showing one item at a time, it's working as desired with some hack as described here: 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 调用几毫秒后 运行.

This snippet makes scrollToIndex run after some milliseconds of the invocation of componentDidMount.

但是当我使用 FlatList 其中视图包含一个 3x3 网格时，我根本无法让它运行.当我使用 scrollToIndex 并且索引在指定的 props initialNumToRender 之外时，我只会收到一个错误 scrollIndex out of range $ID ，这是我不能的理解.提供的数据数组包含所有，例如，100 个项目.当我让我们使用 scrollToEnd 时，它只会停在中间的某个地方，而不是在最后.对我来说，它看起来像是某种错误，我不知道如何在初始渲染后滚动到 $X 项目的任何其他方式.你能帮我吗?

But when I use a FlatList where the view comprises a 3x3 grid, I simply cannot make it run. When I use scrollToIndex and the index is outside of the specified props initialNumToRender, I only get an error scrollIndex out of range $ID which I cannot understand. The provided data array has all the, for instance, 100 items. When I make us of scrollToEnd, it only stops somewhere in between and not at the end. For me, it looks like some kind of bug and I don't know any other way how to scroll to the $X item after the initial rendering. Can you help me?

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

I am grateful for any kind of help or comment.

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

I tried in on React-Native v0.43.0 and v0.44.0 on iOS and Android (Emulator and Device) and it's always the same.

推荐答案

您是否在 FlatList 上设置了 getItemLayout 道具?

Are you setting a getItemLayout prop on the FlatList?

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

Check what it says in the React Native code forscrollToIndex - https://github.com/facebook/react-native/blob/master/Libraries/Lists/FlatList.js#L308

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

This will only really work if your items have a set height though. Seems there isn't a proper solution for items with a variable height yet. I've only managed to get this to work with variable heights by setting initialNumToRender={indexToScrollTo + 1} and then using scrollToOffset instead of scrollToIndex (setting the offset to that of the item you want to scroll to). This has obvious performance issues tho and is really not ideal if you have long lists or your items have complex rendering.

这篇关于FlatList 组件生命周期方法 ScrollToIndex ScrollToEnd 等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！