如何将navigation.goBack()函数传递给子组件？

你可以通过以下两种简洁方式实现：

方案1：直接传递goBack函数引用（推荐） #

这种方式更高效，无需额外创建箭头函数，且navigation.goBack本身已绑定好上下文，可直接传递：

父组件修改： #

<SafeAreaView style={{ flex: 1 }}>
    <ModalLoading visible={loading} />
    <KeyboardAwareScrollView
        innerRef={ref => scrollRef}
        contentContainerStyle={{ flexGrow: 1 }}
        style={styles.container}>

        <HeaderCadastro onGoBack={navigation.goBack} />
</KeyboardAwareScrollView>
</SafeAreaView>

子组件修改： #

确保子组件正确接收onGoBack属性并绑定到Pressable的点击事件：

const HeaderCadastro = ({ onGoBack }) => {
    return (
        <Pressable onPress={onGoBack} style={style.backButton}>
            <Icon name='chevron-back' size={moderateScale(30)} />
        </Pressable>
    );
};

方案2：用箭头函数包裹传递（适合需额外逻辑的场景） #

如果需要在调用goBack时添加额外参数或前置逻辑，可使用箭头函数包裹：

父组件修改： #

<HeaderCadastro onGoBack={() => navigation.goBack()} />

子组件写法与方案1一致，直接绑定onPress={onGoBack}即可。

注意：避免将props命名为navigation，这会与React Navigation自带的navigation对象混淆，改用onGoBack这类语义化名称更清晰。

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