在react-navigation中从嵌套导航器导航到父屏幕

Posted 2021-04-18

我无法从嵌套导航器导航回我的主页。

我的文件结构如下：

const ParentNav = StackNavigator(
    /* Route configs */
    {
        Login: {
            screen: Login
        },
        Signup: {
            screen: Signup
        },
        Authenticated: {
            screen: MainNav
        }
    },

    /* Navigator configs */
    {
        initialRouteName: 'Login',
        headerMode : 'none'
    }
);

export default () => <ParentNav/>;

登录的componentWillMount（）：

ls.save('login-key', this.props.navigation.state.key)

然后...

const MainNav = TabNavigator(
    // Route configs
    {
        "My App": {
            screen: AppNavigator
        },
        "Action": {
            screen: ActionNavigator
        },
        "Settings": {
            screen: Settings
        },
    },

    // Navigator configs
    {
        tabBarPosition: 'bottom'
    }
);

export default () => <MainNav />;

我的设置页面有一个“注销”按钮，我无法弄清楚如何将用户从那里发送回ParentNav的登录屏幕。

设置：

componentWillMount() {
    ls.get('login-key')
    .then(key => {
        console.log('Setting backAction with key ', key)
        backAction = NavigationActions.back({
            key: key
        });
    })
}

_handleLogout = () => {
    auth.logout()
    .then(() => {
        console.log('Dispatch');
        this.props.navigation.dispatch(backAction);
    })
}

答案

如果堆栈导航器中的第一个屏幕是登录页面，您可以使用第一个屏幕的键调度back action（您需要将其保存在某处）。

如果不是，您可以调度reset action，并将登录页面设置为堆栈中的唯一屏幕。

import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'Login'})
  ]
})
this.props.navigation.dispatch(resetAction)

另一答案

一种方法可能如下所示：

1. 有一个变量“isUserLoggedIn”。
2. 如果用户登录则返回MainNav = TabNavigator
3. 如果没有用户登录则返回MaNav =登录屏幕

导航后可能触发重新渲染。

Redux可能对管理全局状态很有用。