Android 如何在react native>；中从一个屏幕导航到另一个屏幕；？

说明：我在android中使用react native。我从登录屏幕开始，使用API成功调用将参数传递到另一个屏幕。我使用StackNavigation导航屏幕。成功登录后，它将移动到另一个带有参数的屏幕

问题：API调用成功，但导航屏幕未更改。引发类似undefined不是函数的错误（计算“\u this.props.navigator（'SecondScreen'））

我把我所有的代码都贴在这里了

index.android.js //这是应用程序的入口点。它将校准第一个App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

import App from './src/components/App';
import SecondScreen from './src/components/SecondScreen';
import {StackNavigator} from 'react-navigation';

export default class reactNavigationSample extends Component{
  render(){
      const {navigation} =this.props;
    return(
          <App navigation ={navigation}/>
    );
  }
}
const SampleApp = StackNavigator({
    Home:{screen:App},
    SecondScreen:{screen: SecondScreen}
});
AppRegistry.registerComponent('AwesomeProject', () => SampleApp);

/**
*示例React本机应用程序
* https://github.com/facebook/react-native
*@flow
*/
从“React”导入React，{Component}；
进口{
评估学，
样式表，
文本，
看法
}从“反应本机”；
从“./src/components/App”导入应用程序；
从“/src/components/SecondScreen”导入SecondScreen；
从“react navigation”导入{StackNavigator}；
导出默认类reactNavigationSample扩展组件{
render（）{
const{navigation}=this.props；
返回(
);
}
}
const SampleApp=StackNavigator({
主页：{screen:App}，
第二屏幕：{screen:SecondScreen}
});
AppRegistry.registerComponent（'AwesomeProject'，（）=>SampleApp）；

App.js

const SecondScreen = () => {
    return(
        <View style={styles.container}>
            <Text style={styles.welcome}>
                THIS IS THE SECOND SCREEN.
            </Text>
        </View>
    );
}
const styles=StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#F5FCFF',
    },
    welcome:{
        fontSize:20,
        textAlign:'center',
        margin:10,
    },
    instructions:{
        textAlign:'center',
        color:'#333333',
        marginBottom:5,
    },
});


SecondScreen.navigationOptions ={
    title: 'Second Screen Title'
}

export default SecondScreen

//这个文件有一个UI，它是两个文本输入和按钮。当我单击按钮时，它将调用login方法，login方法将使用登录API的可能凭据调用API。成功登录后，它应该移动到另一个屏幕

export default class App extends Component{
    static navigationOptions ={
        title : 'Home Screen',
    }
    constructor(props){
        super(props);
        navigate = props.navigation,
        this.state={email:'',password:'',device_token:'',device_type:''};

    }
    login = () => {
        fetch('http://span.mobiosolutions.com/api/v1/login',{
            method:'POST',
            headers:{
                'Accept':'application/json',
                'Content-Type':'application/json',
            },
            body:JSON.stringify({
                email: this.state.username,
                password: this.state.password,
                device_token: 'aajdflkajdjfajdflkj',
                device_type: '1'
            })
        })
        .then((response) => response.json())
            .then((res) => {
                if(res.statusCode === 1){
                    console.log(res);
                    var username=res.message;
                    AsyncStorage.setItem('username',username);
                    this.props.navigator('SecondScreen')
                }else{
                    alert(res.message);
                }
            })
            .done();
    }
    render(){
        const {navigate} = this.props.navigation;
        return(
            <View style={styles.container}>

                <Image source={require('../img/background.jpg')} style={styles.backgroundImage}>
                    <View style={styles.content}>
                        <Text style={styles.logo}>- NATIVE -</Text>

                        <View style={styles.inputContainer}>

                            <TextInput underlineColorAndroid='transparent' style={styles.input}
                                       onChangeText={(username) => this.setState({username})}
                                       value={this.state.username}
                                       placeholder='username' />

                            <TextInput secureTextEntry={true} underlineColorAndroid='transparent' style={styles.input}
                                       onChangeText={(password) => this.setState({password})}
                                       value={this.state.password} placeholder='password'/>
                            {/*<Button*/}
                            {/*onPress={() => navigate('SecondScreen')}*/}
                            {/*title="Login"/>*/}

                            <Button
                                onPress={this.login}
                                title="Login"/>
                        </View>
                    </View>
                </Image>
            </View>
        )
    }
}

const styles=StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#F5FCFF',
    },
    backgroundImage:{
        flex:1,
        alignSelf:'stretch',
        width:null,
        justifyContent:'center',
    },
    welcome:{
        fontSize:20,
        textAlign:'center',
        margin:10,
    },
    instructions:{
        textAlign:'center',
        color:'#333333',
        marginBottom:5,
    },
    content:{
        alignItems:'center',
    },
    logo:{
        color:'white',
        fontSize:40,
        fontStyle:'italic',
        fontWeight:'bold',
        textShadowColor:'#252525',
        textShadowOffset:{width:2,height:2},
        textShadowRadius:15,
        marginBottom:20,
    },
    inputContainer:{
        margin:20,
        marginBottom:0,
        padding:20,
        paddingBottom:10,
        alignSelf:'stretch',
        borderWidth:1,
        borderColor:'#fff',
        backgroundColor:'rgba(255,255,255,0.2)',
    },
    input:{
        fontSize:16,
        height:40,
        padding:10,
        marginBottom:10,
        backgroundColor:'rgba(255,255,255,1)',
    },
});

导出默认类应用程序扩展组件{
静态导航选项={
标题：“主屏幕”，
}
建造师（道具）{
超级（道具）；
导航=道具导航，
this.state={email:''，密码：''，设备\令牌：''，设备\类型：'}；
}
登录=（）=>{
取（'http://span.mobiosolutions.com/api/v1/login',{
方法：'POST'，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
电子邮件：this.state.username，
密码：this.state.password，
设备令牌：“aajdflkajdjfajdflkj”，
设备类型：“1”
})
})
.then（（response）=>response.json（））
。然后（（res）=>{
如果（res.statusCode==1）{
控制台日志（res）；
var username=res.message；
AsyncStorage.setItem（'username'，username）；
this.props.navigator（'SecondScreen'））
}否则{
警报（res.message）；
}
})
.完成（）；
}
render（）{
const{navigate}=this.props.navigation；
返回(
-土生土长的-
this.setState（{username}）}
值={this.state.username}
占位符='username'/>
this.setState（{password}）}
value={this.state.password}占位符='password'/>
{/*导航（'SecondScreen'）}*/}
{/*title=“登录”/>*/}
)
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
辩护内容：'中心'，
对齐项目：'中心'，
背景颜色：“#F5FCFF”，
},
背景图片：{
弹性：1，
alignSelf:“拉伸”，
宽度：空，
辩护内容：'中心'，
},
欢迎:{
尺寸：20，
textAlign:“中心”，
差额：10，
},
说明：{
textAlign:“中心”，
颜色：'#333333'，
marginBottom:5，
},
内容：{
对齐项目：'中心'，
},
标志：{
颜色：'白色'，
尺寸：40，
字体样式：'斜体'，
字体权重：'粗体'，
textShadowColor:“#252525”，
textShadowOffset:{宽度：2，高度：2}，
文本阴影半径：15，
marginBottom:20，
},
输入容器：{
差额：20，
marginBottom:0，
填充：20，
填充底部：10，
alignSelf:“拉伸”，
边框宽度：1，
边框颜色：“#fff”，
背景颜色：'rgba（255255,0.2）'，
},
输入：{
尺寸：16，
身高：40，
填充：10，
marginBottom:10，
背景颜色：'rgba（255255,1）'，
},
});

SecondScreen.js

const SecondScreen = () => {
    return(
        <View style={styles.container}>
            <Text style={styles.welcome}>
                THIS IS THE SECOND SCREEN.
            </Text>
        </View>
    );
}
const styles=StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#F5FCFF',
    },
    welcome:{
        fontSize:20,
        textAlign:'center',
        margin:10,
    },
    instructions:{
        textAlign:'center',
        color:'#333333',
        marginBottom:5,
    },
});


SecondScreen.navigationOptions ={
    title: 'Second Screen Title'
}

export default SecondScreen

const SecondScreen=（）=>{
返回(
这是第二个屏幕。
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
辩护内容：'中心'，
对齐项目：'中心'，
背景颜色：“#F5FCFF”，
},
欢迎:{
尺寸：20，
textAlign:“中心”，
差额：10，
},
说明：{
textAlign:“中心”，
颜色：'#333333'，
marginBottom:5，
},
});
SecondScreen.navigationOptions={
标题：“第二个屏幕标题”
}
导出默认第二屏幕

---

请帮我在React Native中解决这个问题。提前谢谢。

App.js的行中有一个打字错误

this.props.navigator('SecondScreen')

应该是

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

---

在API调用成功响应的构造函数中？您能告诉我您将如何识别问题吗？如果我想将值传递到另一个屏幕，那么我能做什么？