在react-navigation

Question

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

我的文件结构如下：

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 />;

我的设置页面有一个＆＃34;退出＆＃34;按钮，我无法弄清楚如何将用户从那里发送回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 action（您需要将其保存在某处）。

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

import { NavigationActions } from 'react-navigation'

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

Answer 2

这种方法可能如下所示：

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

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

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