在阵营原住民 - 如何在平行而滚动型滚动

Question

我正在开发一个TimeLine组件移动V​​iew元素。横向ScrollView内有Views列表，代表半个小时的积木。我有一个名为TimeRangeSelector的组件，我用它来选择TimeLineScrollView中的一段时间。所以当我滚动ScrollView时，我需要平行移动TimeRangeSelector，没有任何延迟。以下是TimeLine组件。你可以看到ScrollView里面有30分钟的积木。黄色是TimeRangeSelector这是一个Animated.View。并且使用滚动位置设置TimeRangeSelector的左侧位置。每次ScrollView移动im设置状态如下。

<ScrollView 
     horizontal={true} 
     onScroll={this.onScrollFunc} 
    > 
    {timelineElements} 
</ScrollView> 

onScrollFunc = (event, gesture) => { 
    this.setState({ 
    contentOffsetX: event.nativeEvent.contentOffset.x, 
    scrollStopped: false 
    }); 
}; 

和IM传递scrollBarPosition当道具的TimeRangeSelector并设置其左侧位置，风格如下面的代码

<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 
    } 
]; 

但问题是，当我滚动ScrollView的TimeRangeSelector移动与它，但它有一个延迟..当我滚动更快的距离，它应该在哪里，它在哪里，正在变高。任何人都可以根据你的知识给我一些想法。

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

1. ScrollView移动了1帧。
2. ScrollView打响onScroll功能和emmits与新的x点的事件。
3. 然后在onScroll功能它设置状态。

据我了解它需要一些时间一路发生的所有这些步骤从JavaScript线程本地线程，并再次回来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.