React本机在渲染后将ScrollView重置为顶部

Question

当用户离开并返回屏幕时，我正试图将Scrollview重置回顶部。目前，当我向下滚动并点击屏幕之外的另一个选项卡时，当我回到上一个屏幕时，滚动与上次滚动时的位置相同。我的钩子解决方案useRef和useEffect似乎不起作用，我也无法获得滚动的当前位置。你可以在snack.exo:上查看这项工作的原型

https://snack.expo.io/@flag81/滚动到顶部

谢谢是预付款。

Answer 1

如果您使用的是react导航(很可能是这样(，我会使用react导航的钩子useIsFocused

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

在您的选项卡中导入挂钩

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

然后为您的ScrollView 使用引用

const scrollViewRef = useRef<ScrollView>();

然后将挂钩与useEffect一起使用以重置

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