react-native-simple-bottom-sheet滚动异常：列表滚动时背景页面滚动

核心原因 #

底部弹窗未拦截触摸事件，导致滚动事件透传到背后的页面可滚动组件（如ScrollView、FlatList）。

解决方案 #

方案一：弹窗显示时禁用背景页面的滚动 #

如果你的背景页面是可滚动组件，通过状态控制它的滚动权限：

1. 在父组件中维护状态并控制滚动

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

const ParentComponent = () => {
  const [isSheetOpen, setIsSheetOpen] = useState(false);
  const [allowBackgroundScroll, setAllowBackgroundScroll] = useState(true);

  const openSheet = () => {
    setIsSheetOpen(true);
    setAllowBackgroundScroll(false);
  };

  const closeSheet = () => {
    setIsSheetOpen(false);
    setAllowBackgroundScroll(true);
  };

  return (
    <>
      <ScrollView scrollEnabled={allowBackgroundScroll}>
        {/* 背景页面内容 */}
      </ScrollView>

      <SpaceBottomSheet 
        isVisible={isSheetOpen} 
        onClose={closeSheet}
      />
    </>
  );
};

2. 在SpaceBottomSheet中同步关闭逻辑

const closeBottomSheet = () => {
  bottomSheetRef.current?.close();
  props.onClose(); // 通知父组件恢复背景滚动
};

方案二：弹窗内部添加遮罩拦截触摸 #

无需依赖父组件，直接在弹窗内添加遮罩层拦截背景交互：

import { useState } from 'react';

const SpaceBottomSheet = (props) => {
  const bottomSheetRef = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  const closeBottomSheet = () => {
    bottomSheetRef.current?.close();
    setIsOpen(false);
    props.onClose?.();
  };

  return (
    <>
      {/* 遮罩层：拦截背景触摸 */}
      {isOpen && (
        <View 
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            zIndex: 998,
          }}
          pointerEvents="auto"
        />
      )}
      <View style={bottomSheetStyle.container}>
        <BottomSheet 
          ref={bottomSheetRef} 
          sliderMaxHeight={400} 
          sliderMinHeight={0}
          onOpen={() => setIsOpen(true)}
          onClose={() => setIsOpen(false)}
        >
          <View style={bottomSheetStyle.bottomSheet} pointerEvents="auto">
            {/* 关闭按钮、头部等内容 */}
            <FlatList
              style={bottomSheetStyle.list}
              data={data}
              renderItem={renderItem}
              keyExtractor={(item) => item.label}
              nestedScrollEnabled={true}
              contentContainerStyle={{ maxHeight: 300 }}
            />
          </View>
        </BottomSheet>
      </View>
    </>
  );
};

方案三：利用组件内置属性（版本支持时） #

如果你的react-native-simple-bottom-sheet版本支持blockBackground这类属性，直接启用即可：

<BottomSheet 
  ref={bottomSheetRef} 
  sliderMaxHeight={400} 
  sliderMinHeight={0}
  blockBackground={true}
/>

注意事项 #

• 确保FlatList的高度适配弹窗尺寸，避免超出可视区域导致滚动异常
• 使用遮罩层时注意层级设置，保证遮罩在背景之上、弹窗内容之下

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