我一直在使用Scrollview
,它包含一个列表视图,其中包含页面指示符作为数字。当我单击它们时,我希望它们滚动,以便选定的数字位于中间。
喜欢
4 5 6 7 8 9
7是在这里选择的数字,当我点击这里9
滚动视图向左滚动,使该视图如
7 8 9 10 11
不过,我使用的是scrollTo(x : calculated , y : 0 , animated : true)
,但是滚动太慢了。我想要滚动是快速的或可控的参数,我已经尝试了持续时间在scrollTo
,但这是行不通的。
发布于 2016-03-17 08:26:52
目前这是不可能的。scrollTo的调用会导致调用scrollResponderScrollTo,然后调用ios实现或android实现。这将是必须实现滚动速度的点。
发布于 2020-06-16 06:34:18
这是一个非常简洁的解决方案,它使用滚动视图的内容高度来滚动整个视图(在挂载上)。但是,也可以使用相同的技巧(将侦听器添加到动画值)来创建滚动函数,该滚动函数可以在任何给定时刻(对任何给定值)由某个事件触发。
import { useEffect, useRef, useState } from 'react'
import { Animated, Easing, ScrollView } from 'react-native'
const SlowAutoScroller = ({ children }) => {
const scrollRef = useRef()
const scrollAnimation = useRef(new Animated.Value(0))
const [contentHeight, setContentHeight] = useState(0)
useEffect(() => {
scrollAnimation.current.addListener((animation) => {
scrollRef.current &&
scrollRef.current.scrollTo({
y: animation.value,
animated: false,
})
})
if (contentHeight) {
Animated.timing(scrollAnimation.current, {
toValue: contentHeight,
duration: contentHeight * 100,
useNativeDriver: true,
easing: Easing.linear,
}).start()
}
return () => scrollAnimation.current.removeAllListeners()
}, [contentHeight])
return (
<Animated.ScrollView
ref={scrollRef}
onContentSizeChange={(width, height) => {
setContentHeight(height)
}}
onScrollBeginDrag={() => scrollAnimation.current.stopAnimation()}
>
{children}
</Animated.ScrollView>
)
}
https://stackoverflow.com/questions/36035648
复制相似问题