createSharedElementStackNavigator返回时滚动位置未恢复问题求助

问题原因 #

createSharedElementStackNavigator 基于JS层实现导航栈，默认未像createNativeStackNavigator那样在原生层面保留页面的滚动视图状态，导致返回时无法自动恢复之前的滚动位置。

解决方案 #

方法1：组件内手动保存并恢复滚动位置 #

通过监听滚动事件记录位置，利用页面焦点变化触发位置恢复，适用于单个页面场景：

import { ScrollView, useFocusEffect } from 'react-native';
import { useCallback, useRef, useState } from 'react';

function HomeScreen() {
  const scrollRef = useRef(null);
  const [scrollY, setScrollY] = useState(0);

  // 实时记录滚动位置
  const handleScroll = useCallback((e) => {
    setScrollY(e.nativeEvent.contentOffset.y);
  }, []);

  // 页面重新获取焦点时恢复滚动位置
  useFocusEffect(
    useCallback(() => {
      if (scrollRef.current) {
        scrollRef.current.scrollTo({
          y: scrollY,
          animated: false,
        });
      }
    }, [scrollY])
  );

  return (
    <ScrollView
      ref={scrollRef}
      onScroll={handleScroll}
      scrollEventThrottle={16} // 保证滚动位置实时更新
    >
      {/* 你的页面内容 */}
    </ScrollView>
  );
}

如果使用FlatList，只需替换ScrollView为FlatList，并将恢复方法改为scrollToOffset：

scrollRef.current.scrollToOffset({
  offset: scrollY,
  animated: false,
});

方法2：全局状态管理（多页面场景） #

如果多个页面都需要恢复滚动位置，可以通过React Context或Redux统一管理各页面的滚动位置，核心逻辑和方法1一致，只是将状态存储从组件内移至全局。

方法3：检查库配置更新 #

确认react-navigation-shared-element库是否有新增的状态保留配置（部分版本可能添加了类似原生栈的preserveScrollPosition选项），若有则直接开启对应配置即可。

内容的提问来源于stack exchange，提问作者daniel arias