react-native - 我们如何在 React Native 中为 scrollTo() 设置速度？

Question

我使用以下按钮单击按钮滚动页面:

this.scrollTo({y: height, x: 0, animated: true})

滚动工作正常，但是我想减慢滚动动画的速度。
我们怎么做？

Answer 1

这是一个非常简洁的解决方案，它使用 ScrollView 的内容高度来滚动整个 View (安装时)。但是，可以使用相同的技巧(将监听器添加到动画值)来创建滚动函数，该函数可以在任何给定时刻(到任何给定值)由某个事件触发。

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