React Native 控件之 Navigator 组件详解以及实例

[chenbin92]

完整实例代码

先来看看实现的效果图，可以看到底部是常见的一种tab切换效果，有选中效果，自定义的图标(非系统默认提供的图标)，可切换不同的视图.

1. 安装 react-native-vector-icons，提供了3000+的矢量图标

3000 Customizable Icons for React Native with support for NavBar/TabBar, image source and full stying.

  $ npm install react-native-vector-icons --save
  $ rnpm link

在项目根目录下面里执行上面的命令，即可完成 react-native-vector-icons 的安装。

2. 使用 TabBarIOS 组件

  var React = require('react-native');
  var {
    View, 
    Text, 
    TabBarIOS,
  } = React;
  var Icon = require('react-native-vector-icons/Ionicons');

  var TabBarView = React.createClass({
    render: function() {
      return (
        <TabBarIOS>
          <Icon.TabBarItem
            title="Home"
            iconName="ios-home-outline"
            selectedIconName="ios-home"
          >
            <View style={styles.tabContent}><Text>Home Tab</Text></View>
          </Icon.TabBarItem>
        </TabBarIOS>
      );
    }
  };

这是 react-native-vector-icons 的一个 TabBar 示例代码，我们可以很简单的实现一个单独的 TabBar 效果，主要使用了 TabBarIOS 组件 和 react-native-vector-icons 提供的 Icon.TabBarItem 来完成一个图标和文字组合的 tab 效果。注意在 TabBar 使用图标时需要使用组件默认提供的 Icon.TabBarItem 代替 react-native 提供的 TabBarIOS.Item，否是会不生效。

• TabBarIOS 是 react-native 提供的一个标签栏组件，只适应于 iOS；包含三个属性
  1. barTintColor：标签栏的背景颜色
  2. tintColor：当前被选中的标签图标的颜色
  3. translucent：一个布尔值，决定标签栏是否需要半透明化

• Icon.TabBarItem 是react-native-vector-icons提供的组件，包含三个属性

  1. iconName：图标的名称
  2. selectedIconName：选中时图标的名称
  3. iconSize：图标的大小

  

  3. 使用 NavigatorIOS 组件

在步骤二中，已经完成了一个底部 TabBarItem 的效果，那接下来继续完成其他三个，并且保证每个 TabBarItem 的内容是相对应的; 这个时候就该 NavigatorIOS 组件出场了，我们修改上面的代码为：

    var TabBarView = React.createClass({
    render: function() {
      return (
        <TabBarIOS>
          <Icon.TabBarItem
            title="Home"
            iconName="ios-home-outline"
            selectedIconName="ios-home"
          >
         // 注意这里的改变与步骤二对比
         <NavigatorIOS
            barTintColor='#5F97F6'
            titleTextColor='#fff'
            style={styles.navigator}
            initialRoute={{
              component: ComponentName, // 当前 TabBarItem 需要加载的组件
              passProps: {},
              title: 'PageTitle',
            }}/>

          </Icon.TabBarItem>
        </TabBarIOS>
      );
    }
  };

• 使用 NavigatorIOS 组件前，需要先加载 NavigatorIOS 组件，并将其作为路由跳转的入口;
• NavigatorIOS 组件包装了UIKit的导航功能，也就是说，使用 NavigatorIOS 进行路由切换，实质上是调用了 UIKit 的 Navigation。主要通过 initialRoute 属性来提供路由切换功能：

在上面 的代码中，component 表示该页面需要加载的视图组件，title 表示需要在头部显示的标题，passProps 用于页面间传递数据。

NavigatorIOS 组件的属性：

• barTintColor： 导航条的背景颜色
• itemWrapperStyle：为每一项定制样式，例如设置每个页面的背景颜色
• navigationBarHidden：当其值为 true 时，隐藏导航栏
• shadowHidden：是否隐藏阴影，其值为 true 或者 false
• tintColor： 导航栏上按钮的颜色设置
• titleTextColor: 导航栏上的字体的颜色
• translucent：一个布尔值，决定标签栏是否需要半透明化
• initialRoute：初始化路由。 路由对象如下所示：

    {
       component: function //表示该页面需要加载的视图组件
       title: String  // 表示需要在头部显示的标题
       passProps: object // 用于页面间传递数据
       backButtonIcon: // 后退按钮图标
       backButtonTitle: // 后退按钮标题
       leftButtonIcon: // 左边按钮图标
       leftButtonTitle: // 左边按钮标题
       onLeftButtonPress: // 左边按钮点击事件
       rightButtonIcon: // 右边按钮图标
       rightButtonTitle: // 右边按钮标题
       onRightButtonPress: // 右边按钮点击事件
       wrapperStyle: // 包裹样式
    }

4. 使用 navigator 对象

在步骤三中，讲解了 NavigatorIOS 组件的使用，实现了标签栏的 TabBar 切换效果，可以切换 TabBarItem 加载不同的 component；接下来，我们需要让 TabBarItem 对应的视图可以通过路由链接到其他页面,代码如下：

_navigateToSubview: function() {
    this.props.navigator.push({    // 调用navigator对象的push()方法 
      component: MessageDetail, 
      title: "Detail", 
      rightButtonTitle: 'New',
      onRightButtonPress: function(){
        alert('On right button press!');
      }
    })
  }

在组件切换时， navigator 会作为一个熟悉对象被传递。 我们可以通过 this.prpps.navigator 获得 navigator 对象。它可以控制路由的跳转和组件的加载。

navigator 对象的主要方法如下：

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

5. 总结：

1. 使用 react-native-vector-icons 提供的图标库；
2. 使用 TabBarIOS 组件
3. 使用 NavigatorIOS 组件
4. 使用 navigator 对象

[Liberate99]

rnpm link?

[wujunchuan]

@Liberate99 使用链接库

[jrz90000]

使用navigationBarHidden后，返回按钮怎么显示呢？