如何在React或React Native中实现多步登录

Question

我想实现一个多步登录，类似于Slack（它首先询问域名，然后询问电子邮件，然后是密码）。

我想知道什么是最好的做法？

我是否应该使用ReactNavigation等路由器/导航解决方案

这是一种方法，当然。我这样做的方式是一个组件：

class LoginComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { stage: 0 };
    }
    onDomainSubmit(data) {
        this.props.getDomain(data.domain).then((domain) => {
            this.setState({ domain, stage: 1 });
        });
    }
    render() {
        const { stage, domain } = this.state;
        if (stage === 0) {
            return <GetDomainForm onSubmit={ this.onDomainSubmit }... />;
        } else if (stage === 1) {
            return <LoginToDomainForm domain={ domain }... />;
        }
    }
}

getDomain是一个动作创建者，已通过react-redux的connect注入了组件 - 尽管不是必需的。

那样的头痛较小，您需要的一切都包含在一个组件中。

您可以使用switchnavigator。

import React, { Component } from 'react';
import { StackNavigator, TabNavigator, SwitchNavigator } from 'react-navigation';

import AuthLoadingScreen from '../views/users/auth';
import LoginScreen from '../views/users/login';
import RegisterScreen from '../views/users/register';
import ResetPasswordScreen from '../views/users/resetPassword';
import MainTabNavigator from './MainTabNavigator';
export const AuthStack = StackNavigator({
  Auth:         { screen: AuthLoadingScreen, navigationOptions: { header: null } }, 
  Login:        { screen: LoginScreen, navigationOptions: { header: null } }, 
  Register:     { screen: RegisterScreen, navigationOptions: { header: null } },
  ResetPassword:{ screen: ResetPasswordScreen, navigationOptions: { header: null } }  
},{
  initialRouteName: "Auth"
});
export const AppStack = TabNavigator(
  { screen: MainTabNavigator, },
  { navigationOptions: {
      headerStyle: { backgroundColor: '#f4511e', },
      headerTintColor: '#fff',
      headerTitleStyle: { fontWeight: 'bold', },
  },
}
);

  export const createRootNavigator = () => {
    return SwitchNavigator(
      {
        SignedIn:  { screen: AuthStack },
        SignedOut: { screen: AppStack }
      },
      {
        initialRouteName: "SignedIn"
      }
    );
  };