React Native 之 TabBarIOS

前言

• 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习

• 本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢

• 文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞，谢谢

TabBarIOS 组件简介

---

• 目前的APP内，大部分都是选项与选项之间切换，比如：微信、微博、QQ空间…，在iOS中，我们可以通过TabItem类进行实现，那么，在React Native中，我们可以通过TabBarIOS和TabBarIOS.Item组件来实现选项卡切换效果，大家可以看到后面带有IOS，所以这个组件不支持Android，当然后面我们会通过自定义该组件来满足实际开发需求
• 当然，本章涉及到了 TabBarIOS组件 ，那么必不可少的，肯定需要与 TabBarIOS.Item 来搭配使用，废话不多说，先来看它们各自都拥有哪些属性

TabBarIOS 常见属性

---

• 继承了View的所有属性

• barTintColor：标签栏的背景颜色

• tintColor：当前被选中的标签图标颜色

• translucent：bool值，决定标签栏是否需要半透明化

TabBarIOS.Item 常见属性

---

• 继承了View的所有属性

• badge：图标右上角显示的红色角标

• icon：给当前标签指定一个自定义图标(如果定义了 systemIcon属性 这个属性会被忽略)

• onPress：点此标签被选中时调用，你应该修改过组件的状态使 selected={true}

• selected：这个属性决定了子视图是否可见，如果你看到一个空白的页面，很可能是没有选中任何一个标签

• selectedIcon：当标签被选中的时候显示的自定义图标（如果定义了systemIcon属性，这个属性会被忽略，如果定义了icon而没定义这个属性，在选中的时候图标会被染上蓝色）

• systemIcom：一些预定义的系统图标（如果使用了此属性，标题和自定义图标都会被覆盖为系统定义的值）

  • 默认值：’bookmarks’, ‘contacts’, ‘downloads’, ‘favorites’, ‘featured’, ‘history’, ‘more’, ‘most-recent’, ‘most-viewed’, ‘recents’, ‘search’, ‘top-rated’

• title：在图标下面显示的标题文字（如果定义了 systemIcon属性,这个属性会被忽略）

TabBarIOS 初体验

---

• 先简单来看下怎么使用TabBarIOS

  • 首先我们需要引入TabBarIOS
    
    
    

      import {
          TabBarIOS
      } from 'react-native';
  

  • 使用 TabBarIOS 很简单，但是需要配合 TabBarIOS.Item 使用,(需要注意的是我们必须给TabBarIOS设置尺寸，不然可能会造成实例化却无法看到的问题)
    
    
    

      render() {
          return (
              <View style={styles.container}>
                  <TabBarIOS
                      style={
       {
       height:49, width: width}}
                  >
                  </TabBarIOS>
              </View>
          );
      }
  

  效果：
  

  • 接着我们来给它添加 Item（TabBarIOS最多只能包含5个Item，超出的部分会用 more图标 代替）
    
    
    

      render() {
          return (
              <View style={styles.container}>
                  <TabBarIOS
                      style={
       {
       height:49, width: width}}
                  >
                      <TabBarIOS.Item
                          systemIcon="bookmarks"  // 系统图标(bookmarks)
                      >
                      </TabBarIOS.Item>
                      <TabBarIOS.Item
                          systemIcon="contacts"  // 系统图标(contacts)
                      >
                      </TabBarIOS.Item>
                      <TabBarIOS.Item
                          systemIcon="downloads"  // 系统图标(downloads)
                      >
                      </TabBarIOS.Item>
                      <TabBarIOS.Item
                          systemIcon="favorites"  // 系统图标(favorites)
                      >
                      </TabBarIOS.Item>
                      <TabBarIOS.Item
                          systemIcon="history"  // 系统图标(history)
                      >
                      </TabBarIOS.Item>
                  </TabBarIOS>
              </View>
          );
      }
  

  效果：
  

• 是不是很简单，接下来我们试着修改一下 TabBarIOS 的属性，看看效果怎样样

  • 当前被选中标签颜色
    
    
    

      <TabBarIOS
          style={
       {
       height:49, width: w