React Native：如何在FlatList横竖方向切换时保持滚动位置？

确实，直接修改horizontal属性会让FlatList彻底重置滚动状态回到第一项——毕竟方向切换相当于组件的布局逻辑发生了根本性变化，内部的滚动容器会重新初始化。不过我们可以通过提前记录滚动位置+切换后恢复的方式解决这个问题，这里给你两种靠谱的实现方案：

方案一：基于可见Item索引恢复（推荐，适配不同Item尺寸） #

这种方法通过跟踪当前可见的第一个Item索引来恢复位置，不管Item的高度/宽度是否一致都能稳定工作：

1. 首先定义状态保存当前焦点索引，配置可见性检测规则：

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

// ...

const flatListRef = useRef(null);
const [focusedIndex, setFocusedIndex] = useState(0);

// 配置：当Item可见超过50%时视为"可见项"
const viewabilityConfig = {
  itemVisiblePercentThreshold: 50
};

// 实时更新当前可见的第一个Item索引
const onViewableItemsChanged = useCallback(({ viewableItems }) => {
  if (viewableItems.length > 0) {
    setFocusedIndex(viewableItems[0].index);
  }
}, []);

2. 给FlatList添加相关属性，在布局变化后恢复滚动位置：

<FlatList
  ref={flatListRef}
  data={DATA}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
  horizontal={isHorizontal}
  // 绑定可见性检测回调
  onViewableItemsChanged={onViewableItemsChanged}
  viewabilityConfig={viewabilityConfig}
  // 方向切换后触发布局回调，恢复到之前的索引
  onLayout={() => {
    if (flatListRef.current && focusedIndex >= 0) {
      flatListRef.current.scrollToIndex({
        index: focusedIndex,
        animated: false // 关闭动画避免突兀跳转
      });
    }
  }}
/>

为什么推荐这个方案？ #

因为索引是与方向无关的标识，不管是垂直还是水平滚动，只要索引正确，就能定位到对应的Item。即使你的Item高度和宽度不一样，也不会出现偏移错位的问题。

方案二：基于滚动偏移量恢复（适合Item尺寸统一的场景） #

如果你的所有Item尺寸（垂直时的高度、水平时的宽度）完全一致，可以直接记录滚动偏移量来恢复：

1. 分别记录水平和垂直方向的滚动偏移：

const flatListRef = useRef(null);
const [verticalOffset, setVerticalOffset] = useState(0);
const [horizontalOffset, setHorizontalOffset] = useState(0);

// 实时记录当前方向的滚动偏移
const handleScroll = useCallback((event) => {
  const offset = event.nativeEvent.contentOffset;
  if (isHorizontal) {
    setHorizontalOffset(offset.x);
  } else {
    setVerticalOffset(offset.y);
  }
}, [isHorizontal]);

// 方向切换后根据当前方向恢复偏移
const handleLayout = useCallback(() => {
  if (!flatListRef.current) return;
  
  if (isHorizontal) {
    flatListRef.current.scrollToOffset({
      offset: horizontalOffset,
      animated: false
    });
  } else {
    flatListRef.current.scrollToOffset({
      offset: verticalOffset,
      animated: false
    });
  }
}, [isHorizontal, verticalOffset, horizontalOffset]);

2. 绑定到FlatList上：

<FlatList
  ref={flatListRef}
  data={DATA}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
  horizontal={isHorizontal}
  onScroll={handleScroll}
  scrollEventThrottle={16} // 确保滚动事件触发足够频繁，记录精准偏移
  onLayout={handleLayout}
/>

注意事项 #

• 用useCallback包裹所有回调函数，避免组件重新渲染时创建新的函数实例，导致不必要的触发。
• 调用scrollToIndex或scrollToOffset时，最好关闭动画（animated: false），否则会出现明显的跳转感。
• 如果你的数据可能动态变化，记得在数据更新时同步调整focusedIndex的边界，避免出现索引越界的错误。

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