Question

注册成功后，我想将用户路由到主页。我尝试了一些东西，但是没有用，而且我也没有收到错误消息，只是返回了一个空白屏幕，请帮忙！如果您需要其他文件，我将共享一些代码，请告诉我

Signup.js

import React, { Component } from 'react';
import {
  StyleSheet,  
  View,
  TextInput,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Keyboard,
  ActivityIndicator 
} from 'react-native';

import Logo from '../components/Logo';
import { register } from '../store/actions/authActions';
import { connect } from 'react-redux';
import { Actions } from 'react-native-router-flux';
import Routes from '../components/Routes';
//import Example from '../components/circularProgress';

state = {

  username : '',
  name : '',
  email : '',
  password : '',
  message : null,
  isLoading: false
}

const goToLogin = () => {
  Actions.login()
}

const goToHome = () => {
  Actions.home()
}

const DismissKeyboard = ({children}) => (
  <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
    {children}
  </TouchableWithoutFeedback>
);

class Signup extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  state = {
    isLoading : false
  }

  handleSubmit(){
    this.setState({
      isLoading : true
    });
    this.props.register(this.state);
    this.setState({
      isLoading : false
    });
    console.log(this.props);
  } 

    render() {
    const isLoading = this.state.isLoading;
    const { isAuthenticated } = this.props;    

    if (isAuthenticated){
      return(
        <View>
          <Routes/>
        </View>
      )

    }
        return(
      <DismissKeyboard>
            <View style={styles.container}>
                <Logo/>
        <TextInput style={styles.inputBox}
          placeholder="UserName"
          placeholderTextColor = '#ffffff'
          onChangeText={(text) => this.setState({username: text})}
          />
        <TextInput style={styles.inputBox}
          placeholder="Name"
          placeholderTextColor = '#ffffff'
          onChangeText={(text) => this.setState({name: text})}
          />
        <TextInput style={styles.inputBox}
          placeholder="Email"
          placeholderTextColor = '#ffffff'
          onChangeText={(text) => this.setState({email: text})}
          />
        <TextInput style={styles.inputBox}
          placeholder="Password"
          placeholderTextColor = '#ffffff'
          onChangeText={(text) => this.setState({password: text})}
          secureTextEntry={true}
          />
          {isLoading ? (
            <ActivityIndicator color="#0000ff" />
          ):(
            <TouchableOpacity style={styles.button}>
              <Text style={styles.buttonText} onPress={this.handleSubmit}>Signup</Text>          
            </TouchableOpacity>
          )}

                <View style={styles.signupTextCont}>
                    <Text style={styles.signupText}>Already have an account?</Text>
                    <TouchableOpacity onPress={goToLogin}><Text style={styles.signupButton}> Sign in</Text></TouchableOpacity>
                </View>
            </View>
      </DismissKeyboard>    
    )     
    }
}

const mapStateToProps = (state) => ({
  isAuthenticated : state.auth.isAuthenticated,
  isLoading : state.auth.isLoading,
  error : state.error
});

export default connect(mapStateToProps , { register }) (Signup)

Routes.js

import React, { Component } from 'react';
import { Router, Scene, Stack } from 'react-native-router-flux'
import Home from '../pages/Home.js'
import About from '../pages/About.js'
import Login from '../pages/Login.js'
import Signup from '../pages/Signup.js'

export default class Routes extends Component{
  render(){
    return(
       <Router>
          <Stack key="root" hideNavBar={true}>
             <Scene key = "login" component = {Login} title = "Login" initial = {true}/>
             <Scene key = "signup" component = {Signup} title = "Signup"/>
             <Scene key = "home" component = {Home} title = "Home"/>
             <Scene key = "about" component = {About} title = "About"/>
          </Stack>
       </Router>
    )
  }
}

Answer 1

在handleSubmit（）内部成功注册后，在注册页面中

Actions.home()

它将重定向到主页

Answer 2

我不知道您的错误是什么，但是您可以为堆栈分配初始道具。因此，您可以创建第二个堆栈，并检查您的用户是否已登录，并为该值提供初始道具。因此，您的路由器将看起来像这样：

<Router>
<Stack key="root" hideNavBar={true} initial={this.state.isUserLoggedIn}>//your loggedIn value

     <Scene key = "login" component = {HomeScreen} title = "Home"/>


  </Stack>
  <Stack key="root" hideNavBar={true} initial={!this.state.isUserLoggedIn}>

     <Scene key = "login" component = {Login} title = "Login" initial = {true}/>
     <Scene key = "signup" component = {Signup} title = "Signup"/>
     <Scene key = "home" component = {Home} title = "Home"/>
     <Scene key = "about" component = {About} title = "About"/>


  </Stack>

注册/登录后反应本机路由器流量路由

2 个答案: