React Native中Props/函数传递异常问题求助

1. handleSignOut未在HomeDrawer日志中显示：
   日志里看不到handleSignOut是因为JSON.stringify无法序列化函数类型的数据，实际上handleSignOut已经传递到HomeDrawer组件中了，只是打印不出来。
2. someText和handleSignOut未传递到CustomDrawerSignOut：
   HomeDrawer里的drawerContent回调接收的props是React Navigation提供的抽屉导航专属属性，和HomeDrawer自身接收的props不是同一个对象。你只传递了导航的props，没把HomeDrawer的someText和handleSignOut一起传过去。

步骤1：传递HomeDrawer的props给CustomDrawerSignOut #

修改HomeDrawer组件，把自身接收的props和导航的props合并后传递给CustomDrawerSignOut：

const HomeDrawer = (props) => {
    return (
        <Drawer.Navigator
            screenOptions={{ headerShown: false }}
            initialRouteName="Home Page"
            // 合并导航props和HomeDrawer自身的props
            drawerContent={(navProps) => <CustomDrawerSignOut {...navProps} {...props} />}
        >
            <Drawer.Screen name="Home Page" component={HomePage} />
            <Drawer.Screen name="Account Details" component={AccountScreen} />
        </Drawer.Navigator>
    );
};

步骤2：验证并使用CustomDrawerSignOut中的props #

现在CustomDrawerSignOut能正常拿到someText和handleSignOut，可以直接调用登出函数：

const CustomDrawerSignOut = (props) => {
    // 可以打印文本类props验证，函数类props无法被JSON序列化，直接调用即可
    console.log("someText:", props.someText);
    return (
        <DrawerContentScrollView {...props}>
            <DrawerItemList {...props} />
            <DrawerItem label="Sign Out" onPress={props.handleSignOut} />
        </DrawerContentScrollView>
    );
}

额外优化：避免Stack.Screen的组件写法隐患 #

你当前用component={() => <HomeDrawer .../>}的方式，会导致每次渲染都创建新组件实例，引发不必要的重渲染。建议改用initialParams传递数据：

// App组件内修改Stack.Screen
<Stack.Screen
    name="Home"
    component={HomeDrawer}
    initialParams={{ someText: "Mick", handleSignOut: handleSignOut }}
/>

// HomeDrawer中获取参数
const HomeDrawer = ({ route }) => {
    const { someText, handleSignOut } = route.params;
    return (
        <Drawer.Navigator
            screenOptions={{ headerShown: false }}
            initialRouteName="Home Page"
            drawerContent={(navProps) => <CustomDrawerSignOut {...navProps} someText={someText} handleSignOut={handleSignOut} />}
        >
            {/* 抽屉页面配置 */}
        </Drawer.Navigator>
    );
};

这种写法更符合React Navigation的最佳实践，能避免组件重复创建的问题。

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