11

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

为了跳转到特定日期，我尝试将它们的 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：如何滚动到特定行

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

更新

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

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

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

更新 2

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

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

4

1 回答 1

6

看起来这可能很快就会被 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让客户决定何时应将项目视为可见。

演示：

在此处输入图像描述

于 2017-02-09T16:39:19.790 回答