渲染后将原生重置 ScrollView 反应到顶部

【问题标题】：React native reset ScrollView to the top after render渲染后将原生重置 ScrollView 反应到顶部
【发布时间】：2021-09-16 00:22:09
【问题描述】：

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

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

先谢谢了。

【问题讨论】：

标签： react-native scrollview use-effect use-ref

【解决方案1】：

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

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

在你的标签中导入钩子

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

然后为您的 ScrollView 使用 ref

const scrollViewRef = useRef<ScrollView>();

然后使用钩子和useEffect一起重置

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

【讨论】：