Question

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

React Navigator没有推送到新组件，重新加载相同的组件

1 个答案: