React Native ScrollView滑动后自动回到顶部，如何保持当前滚动位置

• 原因1：ScrollView高度未确定
  ScrollView需要固定的可滚动视口高度才能正常工作，如果未给自身或父容器设置明确高度，ScrollView高度会自动适配内容高度，没有滚动空间，滚动松手后就会回弹到初始位置。
  解决方法：给ScrollView及其上层容器添加flex: 1或明确的height属性，示例代码：

  // 正确写法：保证ScrollView有确定的滚动视口高度
  <View style={{flex: 1}}>
    <ScrollView style={{flex: 1}}>
      {/* 滚动内容 */}
    </ScrollView>
  </View>
  

• 原因2：组件重绘导致ScrollView被重置挂载
  如果ScrollView的key属性每次渲染都动态变化，或者滚动过程中频繁触发state更新导致组件重绘，React会将其识别为新组件重新挂载，自动回到顶部位置。
  解决方法：

  • 保持ScrollView的key属性稳定，不要使用随机值、时间戳等动态值作为key
  • 优化onScroll等滚动回调的逻辑，用useCallback、useMemo减少不必要的重绘，state更新添加节流处理
  • 避免在滚动过程中批量新增/删除大量子节点，防止内容高度突变导致滚动位置重置

• 原因3：平台默认回弹属性触发
  iOS端ScrollView默认开启边界回弹效果bounces，Android端默认有超出滚动效果overScrollMode，如果内容高度和视口高度接近，滚动超出边界后会出现类似回到顶部的回弹效果。
  解决方法：根据需求关闭边界回弹，示例代码：

  <ScrollView
    style={{flex: 1}}
    bounces={false} // iOS端关闭边界回弹
    overScrollMode="never" // Android端关闭超出滚动效果
  >
    {/* 滚动内容 */}
  </ScrollView>
  

• 原因4：嵌套滚动手势冲突
  如果ScrollView内部嵌套了其他可滚动组件（如ScrollView、FlatList、SectionList），手势冲突会导致滚动位置异常回弹。
  解决方法：给内层可滚动组件添加nestedScrollEnabled={true}属性（React Native 0.65及以上版本支持），开启嵌套滚动支持。

如果以上方法都无法解决，可以主动监听并保存滚动位置，在组件更新后手动恢复位置，示例代码：

import { useRef } from 'react';
import { ScrollView } from 'react-native';

const DemoComponent = () => {
  const scrollViewRef = useRef(null);
  // 保存当前滚动位置
  const scrollYOffset = useRef(0);

  const handleScroll = (e) => {
    scrollYOffset.current = e.nativeEvent.contentOffset.y;
  };

  // 组件更新后恢复滚动位置，可在需要的生命周期或回调中调用
  const restoreScrollPos = () => {
    scrollViewRef.current?.scrollTo({
      y: scrollYOffset.current,
      animated: false
    });
  };

  return (
    <ScrollView
      ref={scrollViewRef}
      onScroll={handleScroll}
      scrollEventThrottle={16} // 控制滚动回调触发频率，16ms保证每秒60次回调
      style={{flex: 1}}
    >
      {/* 滚动内容 */}
    </ScrollView>
  )
};

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