渲染后将本机重置 ScrollView 反应到顶部

Question

我正在尝试在用户导航离开然后返回屏幕时将 Scrollview 重置回顶部。目前，当我向下滚动并单击远离屏幕的不同选项卡时，当我返回到上一个屏幕时，滚动条位于上次滚动时离开它的相同位置。我使用钩子 useRef 和 useEffect 的解决方案似乎不起作用，我也无法获取滚动条的当前位置。 您可以在 snack.expo:

查看这项工作的原型

https://snack.expo.io/@flag81/scrolltotop

先谢谢了。

Answer 1

如果您正在使用 react-navigation（很可能是这样），我会使用 react-navigation 的 hook useIsFocused

https://reactnavigation.org/docs/use-is-focused/

在您的选项卡中导入挂钩

import { useIsFocused } from "@react-navigation/native";

然后为您的 ScrollView 使用 ref

const scrollViewRef = useRef<ScrollView>();

然后用hook配合useEffect重置

const isFocused = useIsFocused();
useEffect(() => {
    if (isFocused) {
        scrollViewRef.current?.scrollTo(0, 0, true);
    }
}, [isFocused]);