Question

我一直在使用Scrollview，其中包含一个包含页码指示符作为数字的列表视图。当我点击它们时，我希望它们滚动，以便所选的数字位于中心

喜欢

4 5 6 [7] 8 9

这里选择7号，当我在这里点击9时

scrollview向左滚动，以便视图显示为

7 8 [9] 10 11

我正在使用scrollTo(x : calculated , y : 0 , animated : true) 但是卷轴太慢了。我希望滚动快速或可通过参数控制，我已在scrollTo中尝试了持续时间，但这不起作用。

Answer 1

目前无法做到这一点。调用scrollTo会调用scrollResponderScrollTo，然后调用ios implementation或android implementation。这将是必须实现滚动速度的点。

Answer 2

这是一个非常简洁的解决方案，它使用scrollview的内容高度来滚动整个视图（安装时）。但是，可以使用相同的技巧（将侦听器添加到动画值）来创建滚动功能，该滚动功能可以在任何给定时刻（到任何给定值）由某个事件触发。


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>
  )
}

如何改变ScrollView scrollTo滚动速度？

2 个答案: