为什么在 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
});