说明：我一直在使用React Native开发Android应用。我从登录界面开始，通过API成功调用将参数传递到另一个屏幕上。我使用了StackNavigation来导航屏幕。成功登录后，它将移动到另一个带参数的屏幕。
问题： API调用成功，但导航屏幕没有更改。会出现错误，如未定义的函数（评估'_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);
App.js
// 这个文件包含一个UI, 包括两个文本输入框和按钮。当我点击按钮时，它将调用登录方法，登录方法将使用登录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)',
},
});
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
请帮我解决React Native中的这个问题。提前感谢您。