Question

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

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

我应该使用像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 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"
      }
    );
  };

如何实现多步登录反应或反应原生

2 个答案: