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: 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解决，FlatList目前位于React-Native仓库的实验文件夹中。

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

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

现有ListView的主要变化：


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

否DataSource - 只是形状data的简单Array<any>道具。默认情况下，它们的形状应为{key: string}，但为a   可以为不同的形状提供自定义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让客户决定何时购买商品   应被视为可见。

演示：

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

1 个答案: