BackdropComponent下BottomSheetModal的enablePanDownToClose失效如何解决

我在React Native项目中使用@gorhom/bottom-sheet的BottomSheetModal自定义了模态框组件，希望通过参数控制点击外部背景关闭模态框的功能。尝试用enablePanDownToClose属性，但配置backdropComponent后这个属性就失效了；移除自定义背景后，enablePanDownToClose={false}又能正常工作。

我的代码如下：

import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProps, BottomSheetView,  } from "@gorhom/bottom-sheet";
import { globalStyles } from "../../../styles/global";
import React, { ReactNode, forwardRef, useCallback, useRef } from "react";

interface ModalBottomSheetProps extends BottomSheetModalProps{
    children: React.ReactNode
}

export type Ref = BottomSheetModal;

const ModalBottomSheet = forwardRef<Ref, ModalBottomSheetProps>(({
    style,
    enablePanDownToClose = false,
    children,
    ...props
}, ref) => {
    const renderBackDrop = useCallback((props: any) => {
        return (<BottomSheetBackdrop appearsOnIndex={0} disappearsOnIndex={-1} {...props}/>)
      }, []) 

    return (
        <BottomSheetModal
            ref={ref}
            enableDynamicSizing
            style={{shadowColor: '#000', elevation: 10}}
            enablePanDownToClose={false}
            enableOverDrag={false}
            handleIndicatorStyle={globalStyles.bottomSheetIndicator}
            backgroundStyle={globalStyles.bottomSheetBackground}
            backdropComponent={renderBackDrop}
            {...props}
        >
            <BottomSheetView style={[globalStyles.bottomSheetView]}>
                {children}
            </BottomSheetView>
        </BottomSheetModal>
      )
})

export default ModalBottomSheet 

当自定义backdropComponent时，enablePanDownToClose不会自动控制背景的点击关闭逻辑，需要手动通过BottomSheetBackdrop的onPress属性实现开关。以下是修改后的实现：

修改步骤 #

• 新增自定义参数enableBackdropPressToClose，默认与enablePanDownToClose同步，也可单独设置默认值
• 在渲染背景组件时，根据参数决定是否保留默认的onPress回调
• 把硬编码的enablePanDownToClose={false}改为使用传入的参数，提升组件灵活性

修改后的代码 #

import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProps, BottomSheetView } from "@gorhom/bottom-sheet";
import { globalStyles } from "../../../styles/global";
import React, { ReactNode, forwardRef, useCallback } from "react";

interface ModalBottomSheetProps extends BottomSheetModalProps{
    children: React.ReactNode
    // 新增参数：控制点击背景是否关闭模态框
    enableBackdropPressToClose?: boolean
}

export type Ref = BottomSheetModal;

const ModalBottomSheet = forwardRef<Ref, ModalBottomSheetProps>(({
    style,
    enablePanDownToClose = false,
    // 默认与enablePanDownToClose保持一致，可按需修改
    enableBackdropPressToClose = enablePanDownToClose,
    children,
    ...props
}, ref) => {
    const renderBackDrop = useCallback(({ onPress, ...backdropProps }: any) => {
        return (
            <BottomSheetBackdrop 
                appearsOnIndex={0} 
                disappearsOnIndex={-1} 
                // 根据参数决定是否启用背景点击关闭
                onPress={enableBackdropPressToClose ? onPress : undefined}
                {...backdropProps}
            />
        )
    }, [enableBackdropPressToClose]) 

    return (
        <BottomSheetModal
            ref={ref}
            enableDynamicSizing
            style={{shadowColor: '#000', elevation: 10}}
            enablePanDownToClose={enablePanDownToClose}
            enableOverDrag={false}
            handleIndicatorStyle={globalStyles.bottomSheetIndicator}
            backgroundStyle={globalStyles.bottomSheetBackground}
            backdropComponent={renderBackDrop}
            {...props}
        >
            <BottomSheetView style={[globalStyles.bottomSheetView]}>
                {children}
            </BottomSheetView>
        </BottomSheetModal>
      )
})

export default ModalBottomSheet 

说明 #

• 如果需要单独控制背景点击和下拉关闭逻辑，只需在使用组件时分别传递enableBackdropPressToClose和enablePanDownToClose参数即可
• 当enableBackdropPressToClose设为false时，背景的点击回调会被覆盖，点击外部背景不会触发模态框关闭
• 保留了原有的BottomSheetBackdrop配置，不会影响背景的显示/隐藏逻辑

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