javascript 在React-Native中传递属性/函数

crcmnpdw  于 2022-12-10  发布在  Java
关注(0)|答案(1)|浏览(127)

刚接触React Native不久,我最近学习了导航教程https://www.robinwieruch.de/react-native-navigation/。然后我决定把退出功能放到绘图导航器中,这给传递 prop 带来了一大堆蠕虫。我读了很多关于这个的东西,但还是搞不懂这是怎么回事,希望有人能给我解释一下。
在不复制整个代码的情况下(我希望我已经复制了足够多的代码),在App()中我有以下代码:

const [isAuthenticated, setIsAuthenticated] = React.useState(false);

const handleSignIn = () => {
    // TODO implement real sign in mechanism

    setIsAuthenticated(true);
};

const handleSignOut = () => {
    // TODO implement real sign out mechanism

    setIsAuthenticated(false);
};

…

<Stack.Screen
    name="Home"
    component={() => <HomeDrawer someText="Mick" handleSignOut={handleSignOut}/>}
…

在App()之外,我有以下内容:

const HomeDrawer = (props) => {
    console.log("In HomeDrawer props = " + JSON.stringify(props));
    return (
        <Drawer.Navigator
            screenOptions={{ headerShown: false }}
            initialRouteName="Home Page"
            drawerContent={(props) => <CustomDrawerSignOut {...props}/>}
        >
            <Drawer.Screen name="Home Page" component={HomePage} />
            <Drawer.Screen name="Account Details" component={AccountScreen} />
        </Drawer.Navigator>
    );
};

const CustomDrawerSignOut = (props) => {
    console.log("In CustomDrawerSignOut props = " + JSON.stringify(props));
    return (
        <DrawerContentScrollView {...props}>
            <DrawerItemList {...props} />
            <DrawerItem label="Sign Out" onPress={props.handleSignOut} />
        </DrawerContentScrollView>
    );
}

然后,日志输出将显示以下内容:

In HomeDrawer props = {"someText":"Mick"}

In CustomDrawerSignOut props = {"state":{"stale":false,"type":"drawer","key":"drawer-hyj-tged8DkJ7nDxNVVWB","index":0,"routeNames":["Home Page","Account Details"],"history":[{"type":"route","key":"Home Page-rf91ybSgClEeaz_f7Qf7a"}],"routes":[{"name":"Home Page","key":"Home Page-rf91ybSgClEeaz_f7Qf7a"},{"name":"Account Details","key":"Account Details-hwXHxAxa5wR-lg9xq7cp3"}],"default":"closed"},"navigation":{},"descriptors":{"Home Page-rf91ybSgClEeaz_f7Qf7a":{"route":{"name":"Home Page","key":"Home Page-rf91ybSgClEeaz_f7Qf7a"},"navigation":{},"options":{"headerShown":false}},"Account Details-hwXHxAxa5wR-lg9xq7cp3":{"route":{"name":"Account Details","key":"Account Details-hwXHxAxa5wR-lg9xq7cp3"},"navigation":{},"options":{"headerShown":false}}}}

'handleSignOut'似乎无法传递至HomeDrawer,而'someText'似乎无法传递至CustomDrawerSignOut,后者会接收许多其他属性。为何无法正确传递'someText'和'handleSignOut',如何修正?
谢谢

dtcbnfnu

dtcbnfnu1#

我看起来CustomDrawerSignOut没有从HomeDrawer传递 prop
请检查传递到的组件

<Stack.Screen
    name="Home"
    component={(props) => <HomeDrawer {...props} someText="Mick" handleSignOut={handleSignOut}  />}

....

const HomeDrawer = (props) => {
    console.log("In HomeDrawer props = " + JSON.stringify(props));
    return (
        <Drawer.Navigator
            screenOptions={{ headerShown: false }}
            initialRouteName="Home Page"
           // here
            drawerContent={(drawerProps) => <CustomDrawerSignOut {...drawerProps} handleSignOut={props.handleSignOut}/>}
        >
            <Drawer.Screen name="Home Page" component={HomePage} />
            <Drawer.Screen name="Account Details" component={AccountScreen} />
        </Drawer.Navigator>
    );
};

希望它能解决问题

相关问题