Animation 在React Native中-如何在ScrollView滚动时并行移动视图元素

我正在开发一个

TimeLine

组件。水平

滚动视图中有
视图
列表

，表示半小时的块。我有一个名为

TimeRangeSelector

的组件，我用它在

TimeLine

ScrollView

中选择一个时间范围。因此，当我滚动

ScrollView

时，我需要平行移动

TimeRangeSelector

，没有任何延迟。下面是

时间线

组件。您可以看到30分钟的块在

ScrollView

中填充。黄色的是

时间范围选择器

，它是一个动画.View。使用滚动位置设置

时间范围选择器的左侧位置。每次
ScrollView
移动im时，设置如下状态


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

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


{timelineElements}
onScrollFunc=（事件、手势）=>{
这是我的国家({
contentOffsetX:event.nativeEvent.contentOffset.x，
滚动停止：错误
});
};

我将滚动条位置作为道具传递给时间范围选择器，并设置其左位置样式，如下面的代码所示

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


让样式=[
{
位置：“绝对”，
左：this.props.scrollbar位置，
背景色：背景色，
玛金托普：20，
边缘左：1，
宽度：this.state.selectionWidth，
身高：100
}
];

但问题是当我滚动
ScrollView
时
TimeRangeSelector
会随之移动，但会有延迟。。当我滚动得更快时，它应该在哪里和它在哪里之间的距离变得越来越高。根据你的知识谁能给我一些建议

我的假设：根据我的理解，我认为延迟是因为需要几个实例才能达到中的
设置状态
，并按照以下步骤设置
滚动条位置

滚动视图
移动了1帧
ScrollView
启动
onScroll
函数，并使用新的x点触发事件
然后在
onScroll
函数中设置状态
据我所知，从JavaScript线程到本机线程，再回到JS线程，所有这些步骤都需要一些时间

您应该使用类似于
const-onScroll=Animated.event（[{nativeEvent:{contentOffset:{x:animatedValue}}}}}，{useNativeDriver:true}）的东西带有
const animatedValue=new Animated.Value（0）
。这样，动画只在本机级别上完成，而不通过JS线程来回执行

此动画值只能有效地用于“不透明度”和“变换样式”属性，但它应该可以帮助您解决问题

您应该使用类似于
const-onScroll=Animated.event（[{nativeEvent:{contentOffset:{x:animatedValue}}}}}，{useNativeDriver:true}）的东西带有
const animatedValue=new Animated.Value（0）
。这样，动画只在本机级别上完成，而不通过JS线程来回执行

此动画值只能有效地用于“不透明度”和“变换样式”属性，但它应该可以帮助您解决问题

我在什么地方读过这篇文章。但我不知道具体的实施方法。我怎样才能得到我们在这里写Animated.event的滚动视图的确切位置。延迟原因是否为setState循环？因为无论如何我都需要在状态中设置滚动的滚动位置，所以只有我才能运行渲染，以便将滚动位置传递给子级（TimeRangeSelector）。该位置封装在事件中，请在非使用本机驱动程序模式下记录该位置，然后参见。延迟是由setState和从本机到JS代码的来回转换引起的。是的，必须是这样。这方面你能给我什么建议@Daniel Schmidt如果没有setState，就无法调用子组件。我不明白如何在代码“const onScroll=Animated.event（[{nativeEvent:{contentOffset:{x:animatedValue}}}}]，{useNativeDriver:true}}”）中获得当前位置；“@sham999是否已完成，是否在Gitube上可用？我在什么地方读过这篇文章。但我不知道具体的实施方法。我怎样才能得到我们在这里写Animated.event的滚动视图的确切位置。延迟原因是否为setState循环？因为无论如何我都需要在状态中设置滚动的滚动位置，所以只有我才能运行渲染，以便将滚动位置传递给子级（TimeRangeSelector）。该位置封装在事件中，请在非使用本机驱动程序模式下记录该位置，然后参见。延迟是由setState和从本机到JS代码的来回转换引起的。是的，必须是这样。这方面你能给我什么建议@Daniel Schmidt如果没有setState，就无法调用子组件。我不明白如何在代码“const onScroll=Animated.event（[{nativeEvent:{contentOffset:{x:animatedValue}}}}]，{useNativeDriver:true}”）中获取当前位置；“@sham999是否已完成并在github上可用