老样子，先上图：

图也看了，先听老王给你讲讲政治课

NavigatorIOS 是RN中的一个组件

既然是一个组件，那么他就有一堆属性来完成不同的需求：

属性讲解

• barTintColor : 导航条的背景颜色
• initalRoute : 在RN 中导航名为“路由”（学过网络的应该明白这个词的意思）, 作用就是指路的，大家可以这么理解，这个属性是一个方法，用来初始化导航的。
• itemWrapperStyle : 为每一项定制样式，例如设置每一个页面的背景颜色
• navigationBarHidden : 为true , 隐藏导航栏。
• shadowHidden : 是否隐藏阴影，true／false。
• tintColor : 导航栏上按钮的颜色设置。
• titleTextColor : 导航栏上字体的颜色 。
• translucent : 导航栏是否是半透明的，true／false。
• push(route) : 加载一个新的界面（视图或者路由）并且路由到该界面。
• pop() : 返回到上一个页面。
• popN(n) : 一次性返回N个界面，当n ＝ 1 时，即相当于pop（）方法的效果。
• replace（route）：替换当前的路由。
• replacePrevious(route) : 替换前一个页面的视图并且回退过去。
• resetTo(route) : 取代最顶层的路由并且回退过去。
• popToTop() : 回到最上层视图。

废话少说。上干货

'use strict';
var React = require('react-native');
var NextPage = require('./iOSFile/nextPage.js')
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  PixelRatio,
  NavigatorIOS,
  ScrollView,
} = React;

var styles = StyleSheet.create({
    flex: {
        flex:1,
    },

    scrollViewTop : {
        marginTop: 20,
    },

    list_item: {
        color: '#333',
        fontSize: 16,
        fontWeight: 'bold',
        marginLeft: 15,
        borderBottomWidth: 1,
        borderBottomColor: '#ddd',
    },

    detail_text: {
        textAlign: 'center',
    }

})



var List = React.createClass({
    render:function(){
        return(
            <ScrollView style = {[styles.flex,styles.scrollViewTop]}>
                <Text style = {styles.list_item} onPress = {this.goTo}>✨ 王学森，你妈喊你回家娶媳妇儿</Text>
                <Text style = {styles.list_item} onPress = {this.goTo}>✨ 女子无才便是德</Text>
                <Text style = {styles.list_item} onPress = {this.goTo}>✨ 过年逼婚，我草了！！</Text>
            </ScrollView>
        );
    },

    goTo: function(){
    this.props.navigator.push({
        component:NextPage,
        title:'过年详情',
        rightButtonTitle:'全是教导',
        onRightButtonPress:function(){
            alert('你妈催你找媳妇儿');
        }
    });
}
})

var Detail = React.createClass({
    render:function(){
        return(
            <ScrollView style = {styles.scrollViewTop}>
                <Text style = {styles.list_item, styles.detail_text}>详情页</Text>
                <Text style = {styles.list_item}>测试页面</Text>
            </ScrollView>
        );
    }
})

var wxsPrj = React.createClass({
  render: function() {
    return (
        <NavigatorIOS style = {styles.flex} initialRoute = {{
                component: List,
                title: '过年也不好',
                passProps:{},
            }}/>
        );
    }
})

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

nextPage 代码：

var React = require('react-native')

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
}= React;

var NextPage = React.createClass({
    render:function(){
        return(
            <ScrollView style= {styles.flex}>
                <Text style = {styles.titleFont}>过年回家</Text>
                <Text style = {styles.titleFont}>常回家看看</Text>
            </ScrollView>
        )
    }

})

var styles = StyleSheet.create({
    flex: {
        flex:1,
    },

    titleFont: {
        fontSize: 20,
        color: '#ddd',
        textAlign: 'center',

    },

})

module.exports = NextPage;

代码详解：

<ScrollView style = {[styles.flex,styles.scrollViewTop]}>
                <Text style = {styles.list_item} onPress = {this.goTo}>✨ 王学森，你妈喊你回家娶媳妇儿</Text>
                <Text style = {styles.list_item} onPress = {this.goTo}>✨ 女子无才便是德</Text>
                <Text style = {styles.list_item} onPress = {this.goTo}>✨ 过年逼婚，我草了！！</Text>
            </ScrollView>

我们可以看到每一个 ScrollView中的标签都添加一个触摸方法，goTo()，定义如下：

goTo: function(){
    this.props.navigator.push({
        component:NextPage,
        title:'过年详情',
        rightButtonTitle:'全是教导',
        onRightButtonPress:function(){
            alert('你妈催你找媳妇儿');
        }
    });

goTo（）里边的功能：
使用点语法，调用到全局对象navigator，并调用push方法，设置push的下一页为NextPage，onRightButtonPress:是一个方法，里边调用的是alert方法。
可以看出，我们这里调用的navigator完全相当于iOS原生的navigation bar

来看一下我们的爱情动作片：