6

我正在使用新FlatList组件并希望在生命周期方法中使用ScrollToIndex（或ScrollToEnd），例如componentDidMount.

我有一个比方说 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视图包含 3x3 网格的地方时，我根本无法让它运行。当我使用scrollToIndex并且索引超出指定的 propsinitialNumToRender时，我只会收到一个scrollIndex out of range $ID我无法理解的错误。提供的数据数组包含所有，例如 100 项。当我使我们成为 时scrollToEnd，它只会在两者之间的某个地方停止，而不是在最后。对我来说，它看起来像某种错误，我不知道如何在初始渲染后滚动到 $X 项目。你能帮助我吗？

我很感激任何帮助或评论。

我在 iOS 和 Android（模拟器和设备）上尝试了 React-Native v0.43.0 和 v0.44.0，它总是一样的。

4

2 回答 2

5

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

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

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

于 2017-06-02T15:50:05.300 回答
2

查看 VirtualizedList.js，scrollIndex out of range $ID在以下情况下会出现警告：

scrollToIndex(params: {animated?: ?boolean, index: number, viewPosition?: number}) {
    const {data, horizontal, getItemCount} = this.props;
    const {animated, index, viewPosition} = params;
    if (!(index >= 0 && index < getItemCount(data))) {
      console.warn('scrollToIndex out of range ' + index);
      return;
    } ....

也许检查您的 getItemCount 道具是否从您的给定数据中获取正确的计数。默认情况下，prop 使用 data.length，因此如果您还没有指定，您可能需要自己指定。

于 2017-05-09T08:51:38.137 回答