爲什麼在react-native中使用this.props.navigator.replace再次渲染同一場景？

Question

我正在和react-native以及navigator組件一起玩。我有一個簡單的登錄場景，在按下按鈕後，我想重定向到另一個頁面。

我不明白爲什麼當我按下按鈕時，我又得到了同樣的場景。我不再進入MainScreen，而是重新路由到LoginScreen。

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); 

LoginScreen.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({ ... }); 

Answer 1

的問題是，你的renderScene方法需要知道渲染的成分，但你總是在發送LoginScreen組件。做這樣的事情：

renderScene: (route, navigator) { 
    Component = route.component 
    <Component navigator={navigator} route={route} /> 
} 

這意味着您將組件鍵傳遞給導航器以移動到新場景。

this.props.navigator.replace({ 
    component: MainScreen 
});