Question

在一个应用中往往会有多屏内容，我们需要一个方法，用来在它们之间进行切换。React Native 提供了一个 NavigatorIOS 组件来完成这个功能，我用它来完成一些基本功能，如图：

首先，让我们来设置一下应用中包含的模块：

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

老规矩，注意要在列表中增加 NavigatorIOS 组件，现在看看应用的主模块：

var NavDemo = React.createClass({
    onRightButtonPress: function() {
        this.refs.nav.push({
            title: 'From Right',
            component: ForRightScene
        })
    },

    render () {
        return (
            <NavigatorIOS ref="nav"
                style={styles.container}
                initialRoute={{
                    component: HomeScene,
                    title: 'NavigatorIOS Demo',
                    rightButtonTitle: 'MORE! ',
                    onRightButtonPress: this.onRightButtonPress
                }} />
        );
    }
});

现在 NavigatorIOS 就可以在应用中使用了！重要的一个地方是 initialRoute 属性，在 initialRoute 中定义了一些值，这些值从字面上来看就很好理解，如下。

- component：在 NavigatorIOS 中显示的第一个组件，在这个例子中是 HomeScene。

- title：在导航的工具栏中显示的初始文本。

- rightButtonTitle：导航工具栏右侧按钮显示的文本。

- onRightButtonPress：当右侧按钮被点击时执行的函数。

你可能已经注意到，我们在 NavigatorIOS 中增加了一个 ref 属性，以允许我们给 on-RightButtonPress 绑定一个 NavigatorIOS 的引用。这样的话，在 onRightButton-Press 处理函数中，能通过一个 NavigatorIOS 实例引用来调用 NavigatorIOS 的 push 方法。在 push 方法中，我们给一些参数设置了值，而这些参数和 NavigatorIOS 的 initial-Route 所使用的参数是一样的，但是这次我们给 component 设置了一个 ForRightScene，这个我们很快就能看到。现在我们首先来看一下 HomeScene。

var HomeScene = React.createClass({
    onPress() {
        this.props.navigator.push({
            title: 'From TouchableHighlight',
            component: ForTouchScene
        });
    },

    render() {
        return (
            <View style={[styles.scene, {backgroundColor: '#DAF6FF
                '}]}>
                <TouchableHighlight onPress={this.onPress}>
                    <Text>Welcome to the NavigatorIOS Demo. Press
                        here! </Text>
                </TouchableHighlight>
            </View>
        );
    }
});

这部分内容的核心是会触发 onPress 处理器的 TouchableHighlight。NavigatorIOS 控制的组件会被自动设置相应的 navigator 属性值，我们能够通过使用这个属性来 push 一个新的组件——ForTouchScene——到路由堆栈中去。

那么路由堆栈是什么呢？每次我们把一个场景的组件 push 到一个路由堆栈后，我们稍后可以对它进行 pop 操作。这样就给我们所有的场景提供了历史的功能，我们就可以做回退的操作。NavigatorIOS 有一个后退按钮。当后退按钮被触发的时候，能够自动弹出堆栈中相应的场景。

ForTouchScene 和 ForRightScene 组件看起来像是下面这样：

var ForRightScene = React.createClass({
    render() {
        return (
            <View style={[styles.scene, {backgroundColor: '#FFF1E8
                '}]}>
                <Text>You came here from the "right" button! </Text>
            </View>
        );
    }
});

var ForTouchScene = React.createClass({
    render() {
        return (
            <View style={[styles.scene, {backgroundColor: '#ECF6E8
                '}]}>
                <Text>You came here from the TouchableHighlight! </
                    Text>
            </View>
        );
    }
});

很简单，应用的其他部分代码如下：

var styles = StyleSheet.create({
    container: {
        flex: 1
    },
    scene: {
        padding: 10,
        paddingTop: 74,
        flex: 1
    }
});

AppRegistry.registerComponent('rctnavigator', () => NavDemo);

在这里有一个略显奇怪的地方：除非你特殊设置，否则你的内容会被隐藏在 navigation 工具栏下方。为了解决这个问题，我们需要为顶部添加边距，来让这些内容全部展示出来。

{[styles.scene, {backgroundColor: '#FFF1E8'}]}

在上面的实例代码中，这种使用样式数组的方式能够让我们合并两种样式，使用其中的一个作为基础类，另外一个针对不同的组件来进行特殊的样式渲染。

希望这部分内容能够帮助你解决 NavigatorIOS 相关的问题。