登录后无法进入下一页-反应本机堆栈导航

Question

我有三页。 app.js、login.js 和 mainpage.js

我在从登录到主页时遇到问题。问题似乎出在 logibtn 函数的 Login.js 中。

我也试过this.props.navigation而不是传递参数，但还是不行。

App.js

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

import { StackNavigator} from "react-navigation";

import Login from './src/Login';
import MainPage from './src/MainPage';
const NavigationApp = StackNavigator({
    LoginPage:{
    screen: Login
    },
    MainPagePage:{
        screen: MainPage
    }
}
)
export default class extends Component{

    render(){
        return(
            <NavigationApp/>
        )
    }
}

Login.js

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

export default class extends Component{

    static navigationOptions={
        title:"Login"
    };
    constructor(props){
        super(props);
        this.state= {title:'login', username:'', password:''}

        this.loginbtn = this.loginbtn.bind(this);
    }

    loginbtn(navigate){
        let username='Parisa';
        let password='123';

        if(this.state.username===username && this.state.password===password){
            navigate('MainPage')
            title="MainPage";
        }
        else{
            alert("Incorrect Username or Password");
        }

    }
    render(){
        const { navigate } = this.props.navigation;
        return(
            <View style={Styles.container}>
                <Text style={Styles.title}>
                To-Do List
                </Text>
                <View style={Styles.shadow}>
                <TextInput
                style={Styles.input}
                placeholder="Enter username"
                onChangeText={(text) => {this.state.username = text} }
                />
                <TextInput
                style={Styles.input}
                secureTextEntry={true}
                placeholder="Enter password"
                onChangeText={(text) => {this.state.password = text} }
                />
                <TouchableOpacity style={Styles.button} onPress={() => this.loginbtn(navigate)}>
                <Text style={Styles.buttonText}>Log in</Text>
                    </TouchableOpacity>
                </View>
                </View>

        )
    }
}

const Styles = StyleSheet.create({
container:{
    flex: 1,
    backgroundColor: "white",
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,


},
title:{
fontWeight:"bold",
fontSize: 30,
width:180,
textAlign: "center",
color:"#310505"
},
shadow:{
    elevation: 50,
    borderRadius: 4,
    borderWidth: 20,
    borderColor: '#Fff',
    backgroundColor: '#FFF'
},
input:{
    color:"#310505"
},
button:{
    backgroundColor:'#310505',
    width:180,
    height: 30
},
buttonText:{
    fontSize: 20,
    color:"white",
    textAlign: "center"
}


}
)

MainPage.js

import React, {Component} from "react";
import {View, Text} from "react-native";

export default class extends Component{
    static navigationOptions ={
        title:"MainPage"
    }
    render(){
        return(
            <View>
                <Text>MainPage</Text>
            </View>
        )
    }
}

Answer 1

使用

this.props.navigation.navigate('MainPagePage')

而不是

this.props.navigation.navigate('MainPage')

正如您在堆栈导航器中定义的那样。

登录后无法进入下一页-反应本机堆栈导航

Can't go to the next page after login- react native stack navigation

react-native

stack-navigator