为什么在react native中使用this.props.navigator.replace再次渲染同一场景

我使用的是react native，尤其是navigator组件。我有一个简单的登录场景，按下按钮后，我想重定向到另一个页面。

我不明白为什么当我按下按钮时，我会再次渲染相同的场景。我没有转到主屏幕，而是再次转到登录屏幕。

index.ios.js

'use strict';
var React = require('react-native');
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator,
    } = React;
var MainScreen = require('./MainScreen');
var LoginScreen = require('./LoginScreen');
var App = React.createClass({
    render: function () {
        return (
            <Navigator
                style={styles.navigationContainer}
                initialRoute={{id: 'LoginScreen', name:'Login'}}
                renderScene={(route, navigator) =><LoginScreen navigator={navigator}/>}
                />
        );
    }
});

var styles = StyleSheet.create({
    navigationContainer: {
        flex: 1
    }
});
AppRegistry.registerComponent('App', () => App);  

登录屏幕.js

  'use strict';
var React = require('react-native');
var Dimensions = require('Dimensions');
var windowSize = Dimensions.get('window');
var {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    TextInput,
    Image,
    TouchableHighlight
    } = React;
var MainScreen = require("./MainScreen");
var LoginScreen = React.createClass({
    getInitialState: function() {
        return {
            username: '',
            password: ''
        }
    },
    goToMainScreen: function () {
        this.props.navigator.replace({
            id: MainScreen
        });
    },
    render: function() {
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Image style={styles.mark} source={{uri: ''}} />
                </View>
                <View style={styles.usernameAndPasswordContainer}>
                    <View style={styles.inputContainer}>
                        <TextInput
                            style={styles.input}
                            enablesReturnKeyAutomatically={true}
                            onEndEditing={event => this.setState({username: event.nativeEvent.text})}
                            placeholder="Username"
                            placeholderTextColor="#002A32"
                            />
                    </View>
                    <View style={styles.inputContainer}>
                        <TextInput
                            password={true}
                            style={styles.input}
                            placeholder="Password"
                            placeholderTextColor="#002A32"
                            onEndEditing={event => this.setState({password: event.nativeEvent.text})}
                            />
                    </View>
                </View>
                <TouchableHighlight
                    style={styles.signin}
                    onPress={this.goToMainScreen.bind(this)}
                    >
                    <Text>Sign in!</Text>
                </TouchableHighlight>
            </View>
        );
    }
});
var styles = StyleSheet.create({ ... });