如何为react-native-reanimated BottomSheet的props传入组件添加hideSheet方法？

核心思路是把renderHeader从直接传入组件实例改成传入一个接收hideSheet作为参数的函数，让BottomSheet内部可以把自身的hideSheet方法传递给头部组件使用。以下是具体修改步骤和代码示例：

1. 调整BottomSheet组件的renderHeader处理逻辑 #

将原本接收组件实例的renderHeader改为接收函数，并在渲染时传入内部的hideSheet方法：

import Animated, { Easing } from "react-native-reanimated";
...

const BottomSheet = ({
    children,
    renderHeader, // 现在renderHeader是一个函数，而非组件实例
    ...
}) => {
    // 原有代码保持不变...

    const hideSheet = () => {
        Animated.timing(alignment, {
            toValue: 0,
            duration: 400,
            easing: Easing.bezier(0.25, 0.1, 0.25, 1),
        }).start(() => setOpen(false)); // 建议把setOpen(false)移到动画结束回调里，状态更同步
    };

    // 其他函数逻辑不变...

    return (
        <WrapperComponent>
           ...
                    {/* 调用renderHeader函数，传入hideSheet方法 */}
                    {renderHeader && renderHeader(hideSheet)}
           ...
        </WrapperComponent>
    );
};

2. 修改外部头部组件的定义，接收并使用hideSheet参数 #

让renderSheetHeader函数接收hideSheet参数，绑定到关闭图标的点击事件上：

const renderSheetHeader = useCallback((hideSheet) => {
    return (
        <View style={styles.headerCont}>
            <Text style={styles.headerTXT}>Setup your reminders</Text>
            <Icon 
                name="closecircle" 
                size={20} 
                color={colors.GREYONE} 
                onPress={hideSheet} // 点击图标时调用hideSheet关闭底部弹窗
            />
        </View>
    );
}, []);

return (
    <BottomSheet
        ...
        renderHeader={renderSheetHeader} // 这里传入函数本身，不要加()执行
        ...
    >
        {/* 子组件内容 */}
    </BottomSheet>
);

关键说明 #

• 之前直接传递renderSheetHeader()会立即渲染头部组件，此时无法获取到BottomSheet内部的hideSheet方法；改成传递函数后，BottomSheet可以在合适的时机调用这个函数并传入需要的方法。
• 建议把setOpen(false)移到hideSheet的动画结束回调中，保证弹窗收起动画完成后再更新状态，避免状态和视图不同步。

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