react-native - 登录/注册流程作为模式

Question

我正在尝试使用 React Navigation 来控制应用程序的流程。当应用程序打开时，它会加载一个具有两个屏幕的堆栈导航器：主页（我的应用程序的主屏幕）和访问（一个组件，它是另一个以登录页面开头的堆栈导航器）。这是我的App.js：

import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Access from './screens/access/index';
import Home from './screens/Home';

const Root = createAppContainer(createStackNavigator({
  Home: { screen: Home },
  Access: { screen: Access }
}, {
  headerMode: 'none',
  mode: 'modal'
}));

export default class App extends Component {
  render() {
    return (
      <Root />
    );
  }
}

在我的主屏幕中，我检查用户是否已登录（在构造函数中），如果没有，我想将 Access 屏幕显示为模式。显然我可以this.props.navigation.navigate({ routeName: 'Access' })从构造函数触发，但我想避免动画。我想在./screens/Home我会尝试的构造函数中：

const resetAction = StackActions.reset({
  index: 1,
  actions: [
    NavigationActions.navigate({ routeName: 'Home' }),
    NavigationActions.navigate({ routeName: 'Access' }),
  ],
});
this.props.navigation.dispatch(resetAction);

不知何故，这失败了，因为Error: There is no route defined for key Home. Must be one of: 'Login','Password','Signup'. 这当然是指堆栈导航器中定义的路由./screens/access/index：

import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Login from './Login';
import Password from './Password';
import Signup from './Signup';

const Access = createStackNavigator({
  Login: { screen: Login },
  Password: { screen: Password },
  Signup: { screen: Signup }
}, {
  headerMode: 'none'
});
export default createAppContainer(Access);

但是，我不确定为什么当我调用 inside 时它认为这些是this.props.navigation.dispatch路由./screens/Home。

最后，在一个单独的问题上，我希望能够从 Access 屏幕中关闭模式。在该堆栈的第一个屏幕（登录）上，我可以触发 this.props.navigation.dispatch(NavigationActions.back())关闭模式。但是，如果 Login 将 Signup 推送到它上面，那只会返回到 Login（而不是关闭模式）。我怎样才能做到这一点？

标签： react-nativereact-navigation