React Native 的顶部导航栏和底部导航栏目

      说来也是惭愧，本来关于底部导航栏，我已经写过一篇博客，只不过那篇更偏向于入门一些，当时一实现功能之后就迫不及待的分享给大家了。地址在这儿：http://blog.youkuaiyun.com/LJFPHP/article/details/77888439，后来随着项目的逐渐深入，也慢慢对代码有了一定的优化，然后发现了更好的导航栏目的实现，在此分享给大家。

      这边利用的主要组件是react-navigation，这个也是RN官方推荐使用的组件。慢慢了解之后，你会发现它还是挺简单的。

按使用形式主要分三部分:

1 StackNavigator: 类似于普通的Navigator，屏幕上方导航栏
2 TabNavigator: 相当于ios里面的TabBarController，屏幕下方的标签栏
3 DrawerNavigator: 抽屉效果，侧边滑出

一、StackNavigator的使用

1、首先呢，根据官方的概述，这个组件主要用于顶部导航栏目，也就是我们进入页面的顶部标题，进入二级页面的标题以及返回键‘->’等，主要表现形式如下：

      管理设备：我们的页面标题
      点我：页面顶部右侧按钮
      ’->’:大家都知道的，返回键

2、首先，应用场景可以是每个页面，包括一级页面和二级页面，这里我们举例子：

由图可知：比如这个页面，DeviceList是一级页面，DeviceDetail就是二级页面了，这里我们需要用到该组件

3、一级页面的用法：

这里只是用到了标题，而且还是不带任何样式的标题，具体的样式大家可以自己来定义，就像我下面定义的那样
4、多及页面的标题栏

如图所示：
（1）代码的注释就代表每个属性的定义。这里我们可以定义导航栏标题的样式，导航栏的背景色等。
（2）右边按钮时根据业务需求决定加不加的.有左边和右边按钮
（3）StackNavigator的常用属性：

    title: 导航栏的标题
    header: 导航栏设置对象
    headerTitle: 导航栏的标题, 可以是字符串也可以是个组件
    headerBackTitle: 左上角的返回键文字, 默认是上一个页面的title，设置这个属性会覆盖掉title的值
    headerRight: 导航栏右按钮
    headerLeft: 导航栏左按钮
    headerStyle: 导航栏的style
    headerTitleStyle: 导航栏的title的style
    headerTintColor: 返回按钮的颜色
    headerPressColorAndroid ：按压返回按钮显示的颜色 安卓系统 >= 5.0才有效。
    gesturesEnabled ：是否允许右滑返回，在iOS上默认为true，在Android上默认为false

二、TabNavigator底部导航栏的使用

1、表现形式:
      我这边没图了，不过就是定义了四个底部栏目，点击可以切换。可以给每个底部栏目加上图片，更好看一些。
2、使用实例：

const AccScreen = TabNavigator({
  // 路由配置
  Home: { // 主页 
    screen: HomeScreen,
    navigationOptions:{
      tabBarLabel: '主页',
      tabBarIcon: ({tintColor}) => (
        <Image
          source={require('./img/tab_bar/home.png')}
           style={this_style.img}
        ></Image>
      ),
    },
  },
  Device: { 
    screen: DeviceScreen,
    navigationOptions:{
      tabBarLabel: '设备',
      tabBarIcon: ({tintColor}) => (
        <Image
          source={require('./img/tab_bar/device.png')}
          style={this_style.img}
        ></Image>
      ),
    },
  },
  message: {
    screen: messageScreen,
    navigationOptions:{
      tabBarLabel: '消息',
      tabBarIcon: ({tintColor}) => (
        <Image
          source={require('./img/tab_bar/message.png')}
          style={this_style.img}
        ></Image>
      ),
    },
  },
  self: {
    screen: selfScreen,
    navigationOptions:{
      tabBarLabel: '个人',
      tabBarIcon: ({tintColor}) => (
        <Image
          source={require('./img/tab_bar/self.png')}
          style={this_style.img}
        ></Image>
      ),
    },
  },
}, {
  // 设置底部导航栏
  swipeEnabled: false, // 是否允许横向滑动
  initialRouteName: 'Home', // 设置默认的页面组件
  lazy: true, // 在app打开的时候将底部标签栏全部加载，默认false,推荐改成true
  tabBarPosition: 'bottom', // 设置tabbar的位置，iOS默认在底部，安卓默认在顶部。（属性值：'top'，'bottom')
  tabBarOptions: {
    showIcon:true, // 是否显示图标，默认关闭。
    showLabel:true, //是否显示label，默认开启。
    // style-tab bar的样式对象
    style: {
      backgroundColor: '#fcfcfc',
      height:54,
    },
    // tab的样式配置对象
    labelStyle: {
      fontSize: 12,
      color: '#111',
      textAlign:'center',
      marginTop: 0,
    },
  },
  animationEnabled: true,
});

大家都能看懂上面的代码，就是根据相应的属性来实现我们想要的功能。
（1）screen：我们的页面路由
（2）navigationOptions：定义的一些属性，标题名称，图片等
（3）tabBarLabel：标题名称
（4）tabBarIcon：标题的背景图片
（5）this_style.img：这个是我们写的样式，具体的看业务需求

三、DrawerNavigator的使用

1、这个和上面的底部栏目相似，只不过上面的TabNavigator是点击栏目标题，然后直接切换页面，这个则是侧滑出现新页面。

2、这个组件目前我还没有用上，大家有需要的，可以参考下面这位博主的文章：http://blog.youkuaiyun.com/sinat_17775997/article/details/70861065

又到了深夜，也许深夜才是程序员的归宿吧。
end