ReactNative ListView设置数据加载后的初始滚动位置

我有一个活动部分，其中有部分标题包含日期。 我需要能够跳转到特定日期，并且将初始滚动位置设置为将来的第一个日期。

为了跳到特定的日期，我尝试将它们的y位置存储在状态中。

renderSectionHeader= (sectionData, sectionID) => (
      <View
        onLayout={(event) => {
          const { y } = event.nativeEvent.layout;
          const sectionPosition = { [sectionID]: y };
          const sectionPositions = Object.assign({}, this.state.sectionPositions, sectionPosition);
          this.setState({ sectionPositions });
        }}
       ...

我遇到了这种方法的问题，因为renderSectionHeader没有被调用到列表中更靠后的元素上（由于惰性渲染）。

然后，我尝试从数学角度计算位置，但这会导致每个部分的渲染都在屏幕上显示，而它正在接近指定日期。

有没有办法达到我需要的？

有关

React Native ListView：如何滚动到特定的行

https://github.com/facebook/react-native/issues/499

UPDATE

在我的应用程序中，我知道所有的行都是完全相同的高度。

使用contentOffset={{ y: offsetY }}而不是setScroll不起作用，因为它仍然需要渲染所有项目直到指定项目工作。

使用initialListSize={99999999}确实有效，但会使页面非常缓慢，并且我被警告不要使用它。

更新2

是否可以向数据源提供我的初始内容，然后更新数据以在当前屏幕上的元素之前和之后添加额外的项目？

还是有没有找到我需要的图书馆？

---

看起来这可能很快就会被FlatList解决，它目前在React-Native回购的实验文件夹中。

https://github.com/facebook/react-native/blob/a3457486e39dc752799b1103ebe606224a8e8d32/Libraries/Experimental/FlatList.js

更好的ListView - FlatList总结：我们真的需要更好的列表视图 - 所以在这里！

现有ListView主要更改：

项目被“虚拟化”以限制内存 - 也就是说，渲染窗口以外的项目被卸载并且它们的内存被回收。 这意味着当项目滚出渲染窗口时，实例状态不会被保留。

没有DataSource - 只是一个简单的形状Array<any> data道具。 默认情况下，它们的形状为{key: string}但是可以为不同的形状提供自定义的rowExtractor函数，例如，要将id映射到key graphql数据。 请注意底层的VirtualizedList更加灵活。

花式scrollTo功能： scrollToEnd ， scrollToIndex和scrollToItem除了正常scrollToOffset 。

内置拉来刷新支持 - 设置onRefresh和refreshing道具。

除非我们即将耗尽渲染的内容，否则在完成任何交互/动画之后，渲染其他行通常以低优先级完成。 这应该有助于应用程序感受到更多的响应

组件道具替换渲染函数，例如ItemComponent: ReactClass<{item: Item, index: number}>替换renderRow: (...) => React.Element<*>

通过使用onLayout自动支持动态项目，或者可以提供getItemLayout来提高perf的提升和更平滑的scrollToIndex和滚动条行为。

可视性回调替换为更强大的可见性回调，并且至少在Android和iOS上以垂直和水平模式工作，但也可能是其他平台。 额外的权力来自viewablePercentThreshold ，可让客户决定何时应视为可视项目。

演示：

链接地址: http://www.djcxy.com/p/35193.html

上一篇: ReactNative ListView setting initial scroll position after data loaded

下一篇: How can a neural network architecture be visualized with Keras?