React Navigator未推送到新組件，重新加載同一個

Question

我下面寫的代碼有什麼問題。從我的理解導航器的Push方法應該加載一個新的組件，我的導航器實例與渲染。但是，當我按TouchableHighlight加載我的第二頁，我只是得到一個過渡和相同的頁面加載，我也使用導航器NavigatorIOS，因爲我想爲Android和iOS創建一個應用程序。

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
*/ 
'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Navigator, 
    TouchableHighlight 
} = React; 

var Dimensions = require('Dimensions'); 
var windowWidth = Dimensions.get('window').width; 

var SecondPage = React.createClass({ 
    render: function() { 
     return (
      <View style={{ marginTop: 40 }}> 
       <Text>Second page</Text> 
      </View> 
     ) 
    } 
}); 

var HomePage = React.createClass({ 
    render: function() { 
     return (
      <View 
       style={{ marginTop: 40 }} 
       > 
       <TouchableHighlight 
        onPress={() => { 
         alert('go to second page') 

         this.props.navigator.push({ 
          title: 'second page', 
          component: SecondPage 
         }) 
        }} 
       > 
        <Text>Homepage here</Text> 
       </TouchableHighlight> 
      </View> 
     ) 
    } 
}); 

var NavigationTest = React.createClass({ 
    renderScene: function(route, nav) { 
     console.log('renderScene'); 
     return (
      <HomePage 
       navigator={nav} 
      /> 
     ); 
    }, 
    render: function() { 
     return (
      <Navigator 
       ref='navigatorRef' 
       sceneStyle={styles.container} 
       initialRoute={{ 
        name: "First Scene", 
       }} 
       renderScene={this.renderScene} 
       navigationBar={ 
        <View style={styles.navbar}> 
         <View> 
          <TouchableHighlight 
           style={{ padding:15, width:100 }} 
           underlayColor={'#ff6600'} 
          > 
           <Text>Back</Text> 
          </TouchableHighlight> 
         </View> 
        </View> 
       } 
      /> 
     ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor:'#fff', 
    marginTop:75, 
    padding:15 
    }, 
    navbar: { 
    backgroundColor:'red', 
    position:'absolute', 
    top:0, 
    width:windowWidth, 
    paddingTop:30, 
    } 
}); 

AppRegistry.registerComponent('NavigationTest',() => NavigationTest); 

Answer 1

它完全重新加載相同的一個。

查看example這裏。