React Navigator 未推送到新组件，重新加载相同的组件答案

【问题标题】：React Navigator not pushing to new component, reloads the same oneReact Navigator 未推送到新组件，重新加载相同的组件
【发布时间】：2016-01-15 02:19:30
【问题描述】：

我在下面写的代码有什么问题。据我了解，导航器的 Push 方法应该加载一个新组件，我的导航器实例会渲染该组件。然而，当我按下 TouchableHighlight 来加载我的第二个页面时，我只是得到了一个转换并加载了相同的页面，我也在使用 Navigator 而不是 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);

【问题讨论】：

标签： react-native

【解决方案1】：

它完全重新加载相同的。

在此处查看example。

【讨论】：

感谢我查看了文档，但有点忽略了 renderScene 方法，回头看看我的示例工作。所以看起来 renderScene 用于在 push 方法初始化后渲染每个场景，我最初认为它只是用于第一个场景。