react-native - React-Native 自动向下滚动

Question

我有一个带有一个 ScrollView 和一个按钮的应用程序，里面有一个长文本：

return (
    <ScrollView>
        <Button onPress={slowlyScrollDown} title="Slowly scroll a bit down..." />
        <Text>
              [ Very long text here where user has to scroll ]
        </Text>
    </ScrollView>
)

当用户按下按钮时，我想慢慢向下滚动一点，这样他就可以看到文本的前 5-10 行。

我会接受任何提供一段代码的答案，我可以如何实现它。

标签： react-nativescrollview

Answer 1

我不确定它会起作用，但这是方向：

const [offset,setOffset] = useState(0);
const scrollViewRef = useRef();

const slowlyScrollDown = () => {
    const y = offset + 80;
    scrollViewRef.current.scrollTo({x: 0, y, animated: true});
    setOffset(y);
}

return (
    <ScrollView ref={scrollViewRef} >
        <Button onPress={slowlyScrollDown} title="Slowly scroll a bit down..." />
        <Text>
              [ Very long text here where user has to scroll ]
        </Text>
    </ScrollView>
)