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

Question

我有一个事件部分,其中包含包含日期的章节标题.我需要能够跳转到特定日期,并将初始滚动位置设置为将来的第一个日期.

为了跳转到特定日期,我尝试将他们的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

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

或者是否有一个我没找到的图书馆可以满足我的需求？

Answer 1

看起来这可能很快就会被FlatList解决,FlatList目前在React-Native repo的实验文件夹中.

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

更好的ListView - FlatList摘要:我们真的需要一个更好的列表视图 - 所以在这里!

现有的主要变化ListView:

• 项目被"虚拟化"以限制内存 - 也就是说,渲染窗口之外的项目被卸载并且它们的内存被回收.这意味着当项目滚出渲染窗口时,不会保留实例状态.
• 不DataSource- 只是一个简单data的形状支柱Array<any>.默认情况下,它们应具有形状,{key: string}但rowExtractor可以为不同的形状提供自定义函数,例如您要映射id到的graphql数据key.注意底层VirtualizedList更灵活.
• 花哨的scrollTo功能:scrollToEnd,scrollToIndex以及scrollToItem除了正常之外scrollToOffset.
• 内置拉动刷新支持 - 设置onRefresh和refreshing道具.
• 在完成任何交互/动画之后,通常以低优先级渲染其他行,除非我们即将耗尽渲染内容.这应该可以帮助应用程序感受到更快
• 组件道具替换渲染函数,例如ItemComponent: ReactClass<{item: Item, index: number}>替换renderRow: (...) => React.Element<*>
• 通过使用自动支持动态项目onLayout,或者getItemLayout可以提供动作项目以获得性能提升和平滑 scrollToIndex滚动条行为.
• 可见性回调取代了更强大的可查看性回调,并且至少在Android和iOS上以垂直和水平模式工作,但也可能在其他平台上工作.额外的电力来自于 viewablePercentThreshold让客户决定何时应该将项目视为可见的.

演示: