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

Question

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

问题: API 调用成功但导航屏幕未更改。引发错误，如 undefined is not a function (evaluating '_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，它是两个 TextInput 和 Button。当我单击按钮时，它将调用登录方法，登录方法将使用登录 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 中解决这个问题。提前谢谢你。

Answer 1

App.js 中的行中有错字

this.props.navigator('SecondScreen')

应该是

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