React Native（iOS）新手小白零基础自学（三）Nav

NavigatorIOS 顾名思义和OC的UINavigationController一样，这是React对原生导航栏的包装，当然React自身也有类似的控件Navigator，后面会讲到。这里先简单介绍一下NavigatorIOS的一些基本属性：

        1.初始化路由
          initialRoute={{
            component: function, //加载的视图组件
            title: string,  //当前视图的标题
            passProps: object, //传递的数据
            backButtonIcon: Imaget.propTypes.source, //后退按钮图标
            backButtonTitle: string, //后退按钮标题
            leftButtonIcon: Image.propTypes.source, //左边按钮图标
            leftButtonTitle: string,  //左边按钮的标题
            onLeftButtonPress: function,  //左边按钮点击事件
            rightButtonIcon: Image.propTypes.source, //右边按钮图标
            rightButtonTitle: string,  //右边按钮的标题
            onRightButtonPress: function,  //右边按钮点击事件
            wrapperStyle: [object Object] //包裹样式
          }}
        2.barTintColor 导航条的背景颜色  
        3.itemWrapperStyle 为每一项定制样式，例如设置每个页面的背景颜色
        4.navigationBarHidden 当其值为true时，隐藏导航栏
        5.shadowHidden 是否隐藏阴影，值为true或false
        6.tintColor 导航栏上按钮的颜色
        7.titleTextColor 导航栏上字体的颜色
        8.translucent 导航栏是否是半透明的，其值true或false

在组件视图切换时，navigator会作为一个属性对象被传递。我们可以通过this.prop.navigator来获得navigator对象。这个很重要，navigator的主要方法如下：

    push(route) 加载一个新的页面(视图或者是路由)，并且路由到该页面
    pop() 返回到上一页面
    popN(n) 一次性返回N个页面，当N=1时，即相当于pop()
    replace(route) 替换当前路由
    replacePrevious(route) 替换前一个页面的视图并回退过去
    resetTo(route) 取代最顶层的路由并且回退过去
    popToTop() 回到最上层视图

基本上这些属性还是比较好理解的，有不明白的等下在示例中再慢慢体会。例子是从列表页跳到详情页，如下图所示：

屏幕快照 2016-05-05 上午9.55.37.png 屏幕快照 2016-05-05 上午9.55.56.png

为了实现这个功能，需要三个组件：APP入口组件、 列表页组件、 详情页组件

1.入口组件
首先加载NavigatorIOS组件，并将其作为路由跳转的入口.

/*
  component:List 这里为NavigatorIOS组件配置了一个初始化路由List，
                 这样页面启动时就会加载List组件
*/
var NV = React.createClass({
  render: function(){
    return (
      <NavigatorIOS
        style = {{flex:1}}
        initialRoute={{
          component:List,
          title: '邮轮',
          passProps: {},
        }}
      />
    );
  }
});

2.列表页组件

var List = React.createClass({

  render: function (){
    return (
      <ScrollView style={styles.flex}>
        <Text style={styles.listItem} onPress={this.goTo}>✨豪华邮轮济州岛3日游</Text>
        <Text style={styles.listItem} onPress={this.goTo} >✨豪华邮轮台湾3日游</Text>
        <Text style={styles.listItem} onPress={this.goTo}>✨豪华邮轮地中海8日游</Text>
      </ScrollView>
    );
  },

  goTo: function(){
    this.props.navigator.push({
      component:Detail,
      title:'邮轮详情',
      rightButtonTitle:'购物车',
      onRightButtonPress: function() {
        alert('进入我的购物车');
      }
    });
  }

});

3.详情页

var Detail = React.createClass({
  render: function() {
    return (
      <ScrollView>
        <Text>详情页</Text>
        <Text>尽管信息很少，但这就是详情页</Text>
      </ScrollView>
    );
  }
});