在React Native中 - 如何在ScrollView滚动时平行移动View元素

Question

我正在开发一个Views组件。水平ScrollView内有TimeRangeSelector个列表，表示半小时块。我有一个名为TimeLine的组件，我用它来选择ScrollView ScrollView中的一段时间。因此，当我滚动TimeRangeSelector时，我需要并行移动TimeLine而没有任何延迟。以下是ScrollView组件。您可以看到TimeRangeSelector内填充了30分钟的块。黄色一个是TimeRangeSelector，它是Animated.View。并使用滚动位置设置ScrollView的左侧位置。每次<ScrollView horizontal={true} onScroll={this.onScrollFunc} > {timelineElements} </ScrollView> onScrollFunc = (event, gesture) => { this.setState({ contentOffsetX: event.nativeEvent.contentOffset.x, scrollStopped: false }); }; 移动我设置状态如下。

<TimeRangeSelector
      scrollBarPosition={this.state.contentOffsetX}
    />

let styles= [
  {
    position: "absolute",
    left: this.props.scrollBarPosition,
    backgroundColor: backgroundColor,
    marginTop: 20,
    marginLeft: 1,
    width: this.state.selectionWidth,
    height: 100
  }
];

我将scrollBarPosition作为道具传递给TimeRangeSelector并设置其左侧位置样式，如下面的代码所示

ScrollView

但问题是当我用TimeRangeSelector setState移动它时，它有一个延迟..当我滚动得更快它应该在的位置和它的位置之间的距离时，是变高。任何人都可以根据你的知识给我一些想法。

我的假设：根据我的理解，我认为滞后是因为需要多个实例才能到达ScrollBarPosition并将ScrollView设置为以下步骤。

1. ScrollView移动了一帧。
2. onScroll触发onScroll功能并使用新的x点吸引事件。
3. 然后在{{1}}函数中设置状态。

据我了解，所有这些步骤都需要一段时间才能从JavaScript线程一直到Native Thread再次回到JS线程。

Answer 1

您应该使用const onScroll = Animated.event([{ nativeEvent: { contentOffset: { x: animatedValue } } }], { useNativeDriver: true });和const animatedValue = new Animated.Value(0)之类的内容。这样，动画只能在本机级别上完成，而无需在JS线程中来回传递。

此动画值只能与不透明度和变换样式属性一起使用，但它可以帮助您解决问题。

You can read more about this, in this awesome article.