在版本4中,我在contentComponent内使用DrawerItems onItemPress重置了StackNavigation:
const AppDrawerNavigator = createDrawerNavigator(
{
Stack1: {
screen: Stack1,
navigationOptions: { // options}
},
Stack2: {
screen: Stack2,
navigationOptions: { // options}
},
{
initialRouteName: 'Stack1',
contentOptions: {
activeTintColor: '#346bc7',
},
contentComponent: props => {
return (
<ScrollView>
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }} >
<DrawerItems {...props} onItemPress={router => {
const navigateAction = NavigationActions.navigate({
routeName: router.route.routeName,
params: {},
action: NavigationActions.navigate({ routeName: router.route.routes[0].routeName }),
});
props.navigation.dispatch(navigateAction);
}}
/>
</SafeAreaView>
</ScrollView>
)
}
},
);
React Navigation 5具有一个全新的API,因此旧的重置代码无法正常工作。如何在DrawerNavigator v.5中做到这一点?
答案 0 :(得分:4)
基于documentation,这对我有用:
import { CommonActions } from "@react-navigation/native";
props.navigation.dispatch({
...CommonActions.reset({
index: 0,
routes: [{ name: "AuthStackNavigator" }]
})
});
如果您想在该Stacknavigator中重置为特定屏幕,可以执行以下操作:
props.navigation.dispatch({
...CommonActions.reset({
index: 0,
routes: [
{
name: "AuthStackNavigator",
state: {
routes: [
{
name: "SignUpScreen",
params: { //<--- send with param optional
paramTest: "param test"
}
}
]
}
}
]
})
});
我希望这可以帮助某人。
答案 1 :(得分:0)
您在react-navigation-v5中使用抽屉内容而不是contentComponent 简单地编码;
<Drawer.Navigator drawerContent={props => <DrawerCustomComponent {...props} />}>
{{ screen objects }}
</Drawer.Navigator>
示例项目; github