[英]Jumping between different navigators in react native using react-navigation
我有3个导航器。 MainNavigator是其他两个(Auth和Activity)的根。 根据用户是否已成功登录,我需要将用户从“身份验证”堆栈路由到“活动”堆栈。 我怎样才能做到这一点? 我似乎还不能弄清楚(来自Angular的React-native新手)。
这是我用来导航到“活动”堆栈的代码行:
this.props.navigation.navigate('Activities');
验证:
export const AuthNavigator = StackNavigator({
Login: {
screen: Login,
},
SignUp: {
screen: SignUp
},
Confirm: {
screen: ConfirmSignUp
}
}, {
initialRouteName: 'Login',
headerMode: 'none',
animationEnabled: 'true'
});
活动内容:
export const ActivitiesNavigator = TabNavigator({
ActivityList: {
screen: ActivityList
},
MyActivityList: {
screen: MyActivityList
},
CreateActivity: {
screen: CreateActivity
}
}, {
initialRouteName: 'ActivityList'
});
主导航器:
export const MainNavigator = StackNavigator({
Auth: { screen: AuthNavigator},
Activities: { screen: ActivitiesNavigator },
}, {
initialRouteName: 'Auth',
headerMode: 'none',
animationEnabled: 'true'
});
这实际上有效。 睡眠不足使我将“ navigate”命令置于另一种方法中。 所以在我的App.js文件中,我只需要返回MainNavigator就可以了:
render() {
return (
<MainNavigator/>
);
}
您不需要3个导航器。 这是使用React Navigation做到这一点的方法
export const AuthNavigator = StackNavigator({
Login: {
screen: Login,
},
SignUp: {
screen: SignUp
},
Confirm: {
screen: ConfirmSignUp
},
Main: {
screen: ActivitiesNavigator
}
}, {
initialRouteName: 'Login',
headerMode: 'none',
animationEnabled: 'true'
});
访问StackActions reset:reset操作将擦除整个导航状态,并将其替换为若干操作的结果。
在最新的反应导航版本:3.3.0中,我已使用:在注册或登录时启动主流程/主流程
import { StackActions, NavigationActions } from 'react-navigation'; const resetAction = StackActions.reset({ index: 0, key: null, // <-this is imp. actions: [ NavigationActions.navigate({ routeName: 'Main' }) ], }); this.props.navigation.dispatch(resetAction);
切记 :添加密钥:null表示主路由将为null,而不是任何路由。 因此,我们可以自由导航到任何嵌套堆栈中的路线
key-字符串或null-可选-如果设置,具有给定键的导航器将重置。 如果为null,则根导航器将重置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.