使用react-navigation

时间:2018-03-03 07:07:50

标签: javascript react-native react-navigation

我有3个Navigators。 MainNavigator是另外两个(Auth和Activities)的根。根据用户是否已成功登录,我需要将用户从Auth Stack路由到Activities堆栈。我怎样才能做到这一点?我现在似乎无法解决这个问题(新的反应原生,来自Angular)。

这是我用来导航到Activities堆栈的代码行:

        this.props.navigation.navigate('Activities');

Auth:

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'
});

3 个答案:

答案 0 :(得分:2)

这实际上有效。睡眠不足让我把'navigate'命令放在另一种方法中。所以在我的App.js文件中,我只需要返回MainNavigator,我很高兴:

render() {

    return (
        <MainNavigator/>
    );
}

答案 1 :(得分:0)

你不需要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'
    });

答案 2 :(得分:0)

访问StackActions重置: 重置操作会擦除整个导航状态,并将其替换为若干操作的结果。

在最新的反应导航版本: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-可选-如果已设置,则具有给定键的导航器将重置。如果为null,则根导航器将重置。