加载数据后 React Native ListView 设置初始滚动位置

Question

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

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

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: How to scroll to a particular row

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

更新

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

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

使用initialListSize={99999999} 确实有效，但会使页面变慢，我已被警告不要使用它。

更新 2

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

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

Answer 1

看起来这个问题可能很快就会被 FlatList 解决，它目前位于 React-Native repo 的实验文件夹中。

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

Better ListView - FlatList 总结：我们真的需要一个更好的列表视图 - 就是这样！

现有ListView的主要变化：

• 项目被“虚拟化”以限制内存——也就是说，渲染窗口之外的项目被卸载并回收它们的内存。这 表示当项目滚出时不保留实例状态 渲染窗口。
• 没有DataSource - 只是一个简单的data 形状道具Array<any>。默认情况下，它们的形状应该是{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以提高性能和更流畅 scrollToIndex 和滚动条行为。
• 可见性回调被更强大的可见性回调取代，并且至少在 Android 和 iOS 上以垂直和水平模式工作， 但也可能是其他平台。额外的力量来自 viewablePercentThreshold 让客户决定何时购买商品 应视为可见。

演示：