React Native 中如何让ScrollView组件重渲染时保持原有滚动位置

你遇到的ScrollView重渲染后回到起始位置的问题，核心原因是状态更新时触发了组件不必要的重渲染，导致ScrollView实例或内部内容被重建，丢失了之前的滚动偏移量。可以按以下步骤修改：

1. 优化渲染逻辑，避免不必要重绘 #

• 将分类选择栏封装为独立组件，使用React.memo包裹，仅当依赖的categoryNumber变化时才触发重渲染，隔绝父组件其他状态更新的影响
• 把重复的TouchableOpacity改为数组循环渲染，给每个元素添加稳定唯一的key，避免React Diff时重建整个内容列表

2. 保存滚动偏移量（可选兜底方案） #

如果优化渲染后问题仍然存在，可以通过监听滚动事件保存偏移量的方式兜底：

• 用useRef创建ScrollView实例引用和滚动偏移量存储变量，ref的更新不会触发组件重渲染
• 绑定ScrollView的onScroll事件，实时把水平滚动偏移量存入ref
• 给ScrollView添加scrollEventThrottle属性控制滚动事件触发频率，保证偏移量记录准确

修改后的代码示例：

import React, { useRef, memo } from 'react';
import { ScrollView, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { setCategoryNumber } from '你的redux状态对应路径';

// 用memo包裹组件，仅当依赖项变化时才重渲染
const CategoryTab = memo(() => {
  const dispatch = useDispatch();
  const categoryNumber = useSelector(state => state.你的模块名.categoryNumber);
  // 存储ScrollView实例和滚动偏移量
  const scrollRef = useRef(null);
  const scrollOffset = useRef(0);

  // 分类数据统一管理，避免重复编写组件
  const categories = [
    { id: 0, name: 'ITEM_NAME 1' },
    { id: 1, name: 'ITEM_NAME 2' },
    { id: 2, name: 'ITEM_NAME 3' },
    { id: 3, name: 'ITEM_NAME 4' },
    { id: 4, name: 'ITEM_NAME 5' },
    { id: 5, name: 'ITEM_NAME 6' },
  ];

  return (
    <ScrollView 
      ref={scrollRef}
      style={{ height: 50, width: '100%' }} 
      contentContainerStyle={{ alignItems: 'center', paddingHorizontal: 4 }} 
      horizontal={true} 
      showsHorizontalScrollIndicator={false}
      scrollEventThrottle={16}
      onScroll={(e) => {
        // 实时记录滚动偏移量
        scrollOffset.current = e.nativeEvent.contentOffset.x;
      }}
      // 组件布局更新时手动滚动到之前记录的位置，兜底避免回弹
      onLayout={() => {
        if (scrollRef.current && scrollOffset.current > 0) {
          scrollRef.current.scrollTo({ x: scrollOffset.current, animated: false });
        }
      }}
    >
      {categories.map(item => (
        <TouchableOpacity
          key={item.id}
          style={categoryNumber === item.id ? styles.BtnActive : styles.Btn}
          onPress={() => dispatch(setCategoryNumber(item.id))}
        >
          <Text style={categoryNumber === item.id ? styles.BtnTextActive : styles.BtnText}>
            {item.name}
          </Text>
        </TouchableOpacity>
      ))}
    </ScrollView>
  );
});

const styles = StyleSheet.create({
  Btn: {
    height: 40,
    backgroundColor: '#F1F5FE',
    paddingHorizontal: 10,
    justifyContent: 'center',
    borderRadius: 12,
    marginHorizontal: 4
  },
  BtnText: {
    color: '#000'
  },
  BtnActive: {
    height: 40,
    backgroundColor: '#336FEE',
    paddingHorizontal: 10,
    justifyContent: 'center',
    borderRadius: 12,
    marginHorizontal: 4
  },
  BtnTextActive: {
    color: '#fff'
  }
});

export default CategoryTab;

如果使用类组件，逻辑同理：用createRef保存ScrollView实例，在componentDidUpdate生命周期中手动滚动到之前记录的偏移量即可。

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