刚接触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',如何修正?
谢谢
1条答案
按热度按时间dtcbnfnu1#
我看起来
CustomDrawerSignOut
没有从HomeDrawer
传递 prop请检查传递到的组件
....
希望它能解决问题