node.js - 我正在使用 React-native 和 Node js。在收到 Node js 的响应后，我无法从一个屏幕导航到另一个屏幕

Question

这是我的登录函数，单击登录按钮后执行

login=()=>{
    fetch('http://192.168.0.101:9090/Shakehands',{
        method:'post',
        headers:{
            'Accept':'application/json',
            'Content-type':'application/json',
        },
        body:JSON.stringify({
            email:this.email,
            password:this.password,
            text:"Login"
        })
    })
    .then((responseData)=>{
        return responseData.json();
    })
    .then((responseData)=>{
        //console.log(responseData);
        //alert(this.state.insdata)
        if(responseData.success==true){
            this.props.navigation.navigate('Home');
        }
        else{
            alert(responseData.message);
        }
    }).done();
}

这是我的 Node.js 后端

con.query('SELECT *  from Shakehands where email=? AND password=?',[email,password],function(error,rows,fields){
  if(!!error) console.log(error);

  if(rows.length>0){
    res.send({'success':true,'message':'Welcome'})
  }
  else{
    res.send(JSON.stringify({'success':false,'message':'User not found'}))
  }
})

这是导航器功能

    const Navigation = StackNavigator({
    Splash:{
        screen:Splash,
        navigationOptions:{
            header:null,
        }
    },
    Login:{
        screen:Login,
        navigationOptions:{
            header:null,
        }
    },
    Signup:{
        screen:Signup,
        navigationOptions:{
          header:null,
        }
    },
    ForgetPass:{
        screen:ForgetPass,
        navigationOptions:{
            header:null,
        }
    },
    Home:{
        screen:Home,
        navigationOptions:{
            header:null,
        },
    }
})
export default Navigation;

登录功能包含在文件 logtxtbox 中，其中包含文本输入和按钮，而按钮又包含在登录文件中。

这是 Login.js 文件:

import React,{Component} from 'react';
import {View,AppRegistry,StyleSheet,ScrollView,TouchableOpacity,Text,StatusBar} from 'react-native';
import Animate from '../Components/Animate';
import Logtxtbox from '../Components/Logtxtbox';

export default class Login extends Component{

    render(){
        return(
            <ScrollView>
                <View style={styles.container}>
                <StatusBar backgroundColor='#1c313a'/>
                <Animate />
                <Logtxtbox />


                <TouchableOpacity onPress={()=>this.props.navigation.navigate('ForgetPass')}>
                    <Text title='ForgotPassword' style={{fontSize:16 ,marginTop:10 ,
                        color:'white',fontWeight:'bold'}}>ForgotPassword?</Text>
                </TouchableOpacity>

                <Text style={styles.sign}>Don't have an acoount yet?</Text>

                <TouchableOpacity onPress={()=>this.props.navigation.navigate('Signup')}>
                    <Text title='SignUp' style={styles.signup}>SignUp</Text> 
                </TouchableOpacity>

                </View>   
            </ScrollView>   
        )
    }
}AppRegistry.registerComponent('Login',()=>Login)

这是 Login.js 的样式:

const styles = StyleSheet.create({
    container:{
        backgroundColor:'#455a64',
        alignItems:'center',
        height:600
    },
    signup:{
        color:'white',
        fontSize:16,
        fontWeight:'bold',
        textAlign:'center',
    },
    sign:{
        textAlign:'center',
        color:'white',
        fontSize:16,
        marginTop:20,
    }
})

Answer 1

您必须将 this.props.navigation 传递给内部组件。您可以使用这部分代码:

render(){
    return(
        ...
        <Logtxtbox navigation = { this.props.navigation }/>
        ...
    )
}