使用 react-navigation 在 react native 中的不同导航器之间跳转

Question

我有 3 个 Navigator。 MainNavigator 是其他两个（Auth 和 Activities）的根。根据用户是否已成功登录，我需要将用户从 Auth Stack 路由到 Activities 堆栈。我怎样才能做到这一点？我似乎还无法弄清楚这一点（react-native 的新手，来自 Angular）。

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

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

Answer 1

这确实有效。睡眠不足让我以不同的方式使用 'navigate' 命令。所以在我的 App.js 文件中，我只需要 return MainNavigator 就可以了：

render() {

    return (
        <MainNavigator/>
    );
}

Answer 2

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

Answer 3

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

在最新的 react-navigation 版本：3.3.0 中，我使用：在注册或登录时启动 Home/Main Flow

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 表示主路由将为空且不在任何路由上。所以我们可以自由导航到任何嵌套堆栈中的路由

key - 字符串或 null - 可选 - 如果设置，具有给定键的导航器将重置。如果为空，根导航器将重置。

使用 react-navigation 在 react native 中的不同导航器之间跳转

Jumping between different navigators in react native using react-navigation

javascript

react-native

react-navigation