React Native：BottomSheetFlatList每次打开需回到初始位置的问题

算力阿峰

2026-8-11

解决BottomSheetFlatList打开时停留在上次滚动位置的问题

要让BottomSheetFlatList每次打开时回到初始滚动位置，你可以通过以下两种方式实现：

方法一：通过FlatList Ref手动触发滚动到顶部

首先创建BottomSheetFlatList的引用：

import { useRef } from 'react';

const flatListRef = useRef(null);

将引用绑定到BottomSheetFlatList组件上：

<BottomSheetFlatList
  ref={flatListRef}
  data={zoneList}
  keyExtractor={(item, index) => `${index}`}
  renderItem={renderItem}
  contentContainerStyle={styles.contentContainer}
/>

在打开底部弹窗的handleSnapPress函数中，调用滚动方法重置位置：

const handleSnapPress = (index) => {
  // 执行原有打开逻辑
  // ...
  
  // 滚动到列表顶部（无动画）
  flatListRef.current?.scrollToOffset({ offset: 0, animated: false });
  // 也可以使用scrollToIndex直接定位到第一项
  // flatListRef.current?.scrollToIndex({ index: 0, animated: false });
};

方法二：利用BottomSheet的onChange事件触发滚动

直接在BottomSheet组件的onChange回调中监听弹窗状态，当弹窗展开到目标位置时重置滚动：

<BottomSheet
  ref={bottomSheetRef}
  index={0}
  snapPoints={snapPoints}
  enableDismissOnClose={true}
  handleIndicatorStyle={{display: 'none'}}
  handleStyle={{padding: 0}}
  onChange={(currentIndex) => {
    // 当弹窗切换到展开的snap点时（这里假设index=1是展开状态）
    if (currentIndex === 1) {
      flatListRef.current?.scrollToOffset({ offset: 0, animated: false });
    }
  }}
>
  {/* 弹窗内部内容 */}
</BottomSheet>