如何在React Native中同步两个滚动视图? [英] How to sync two scrollviews in react native?

问题描述

我的要求是创建一个具有固定标题和第一列的表，表数据将在水平和垂直方向上滚动.

My requirement is to create a table with fixed header and first column, table data will scroll in both horizontal and vertical directions.

为此，我使用了3个scrollviews，下面的gif会使其清楚

for this I have used 3 scrollviews , following gif will make it clear

1. 第一个滚动视图是标题名称行，它设置为horizo​​ntal = true(即其滚动方向为水平)
2. 第二滚动视图是表的第一列kcname，它是垂直滚动，它们都具有scrollEnabled = {false}，因为它们不会采取滚动手势，因此可以使用scrollTo进行编程滚动
3. 第三个滚动视图是填充数据的主体单元格表，该视图有2个滚动视图作为父级，一个进行水平滚动，另一个进行垂直滚动.

使用onScroll事件的refs将两个主体滚动视图的滚动值放入其他两个scrollview的scrollTo中，scrollEventThrottle的值为16.

the scroll values of two body scroll views are put in scrollTo of the other two scrollview using refs on onScroll event, scrollEventThrottle value is 16 .

我的问题是如何同步这些滚动视图的滚动，因为这清楚地显示了滞后，这是不可接受的

My problem is how to sync these scrollviews scrolls as this clearly shows lag, which is not acceptable

推荐答案

禁用 scrollTo 动画，如下所示:

this.toolbar.scrollTo({
  x: yourXValue,
  animated: false,
});

那么就没有滞后了:)

这篇关于如何在React Native中同步两个滚动视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！