从反应导航中的嵌套导航器导航到父级的屏幕

Question

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

我的文件结构如下：

const ParentNav = StackNavigator(
    /* Route configs */
    {
        Login: {
            screen: Login
        },
        Signup: {
            screen: Signup
        },
        Authenticated: {
            screen: MainNav
        }
    },
    /* Navigator configs */
    {
        initialRouteName: 'Login',
        headerMode : 'none'
    }
);
export default () => <ParentNav/>;

登录的组件WillMount(( ：

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

Answer 1

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

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

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