reactjs - 如何在 react 或 react native 中实现多步登录

Question

我想在 react 和 react-native 中实现一个多步骤登录，类似于 slack（它首先询问域名，然后是电子邮件，然后是密码）。

我想知道这样做的最佳做法是什么？

我应该使用像 ReactNavigation https://github.com/react-community/react-navigation这样的路由器/导航解决方案吗？

Answer 1

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

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's注入到组件中connect——尽管这不是必需的。

这样就不会那么麻烦了，您需要的一切都包含在一个组件中。

Answer 2

您可以使用 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"
      }
    );
  };