我正在开发一个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
设置为以下步骤。
答案 0 :(得分:2)
您应该使用const onScroll = Animated.event([{ nativeEvent: { contentOffset: { x: animatedValue } } }], { useNativeDriver: true });
和const animatedValue = new Animated.Value(0)
之类的内容。这样,动画只能在本机级别上完成,而无需在JS线程中来回传递。
此动画值只能与不透明度和变换样式属性一起使用,但它可以帮助您解决问题。