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

Posted 2023-03-17

【中文标题】渲染后将原生重置 ScrollView 反应到顶部

【英文标题】：React native reset ScrollView to the top after render

【发布时间】：2021-09-16 00:22:09

【问题描述】：

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

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

先谢谢了。

【参考方案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]);