react-native之tabBar在Android平台上的实现

  对于一款App来说，TabBar可谓是最基本的一个组件了，在绝大部分的App上都能看到它的身影，要想使用RN实现这一基本组件，RN官方针对IOS已经提供了TabBarIOS这个组件，但是此组件并不适合Android平台，而且官方对于Android也是一直没有与之对应的TtabBar`组件，所以想要实现这一功能，只能借助第三方了。

  这里我想要介绍的是一个名为react-native-tab-navigator的组件，在github上的地址是 react-native-tab-navigator

---

首先看一下效果图：

  底部那三个tab就是要使用react-native-tab-navigator实现的效果了。

具体步骤如下：

1. 首先引入模块包

1. 安装
   npm install react-native-tab-navigator –save
   
   
2. 引入到项目中
   import TabNavigator from ‘react-native-tab-navigator’

2. 使用

基本使用如下：

  'home'}
    title="Home"
    renderIcon={() => source={...} />}
    renderSelectedIcon={() => source={...} />}
    badgeText="1"
    onPress={() => this.setState({ selectedTab: 'home' })}>
    {homeView}
  
  'profile'}
    title="Profile"
    renderIcon={() => source={...} />}
    renderSelectedIcon={() => source={...} />}
    renderBadge={() => }
    onPress={() => this.setState({ selectedTab: 'profile' })}>
    {profileView}
  

  这是官方给出的最基本的例子，显然不能满足绝大多数的场景，但是我们自己动手改一改也就成了。

  例如我在一开始给出的那个效果中，就是我自己动手优化后的效果，具体代码如下：

            this.state.selectedTab==='List'}
              renderIcon={()=>"ios-videocam-outline" size={30} color="#4F8EF7" />}
              renderSelectedIcon={()=>require('./my-icon.png')} />}
              onPress={()=>this.setState({selectedTab:'List'})}>
                这是List页面
            
            this.state.selectedTab==='Edit'}
            renderIcon={()=>"ios-recording-outline" size={30} color="#4F8EF7" />}
            renderSelectedIcon={()=>"ios-recording" size={30} color="#4F8EF7" />}
            onPress={()=>this.setState({selectedTab:'Edit'})}>
            这是Edit页面
            
            this.state.selectedTab==='Account'}
            renderIcon={()=>"ios-more-outline" size={30} color="#4F8EF7" />}
            renderSelectedIcon={()=>"ios-more" size={30} color="#4F8EF7" />}
            onPress={()=>this.setState({selectedTab:'Account'})}>
            
            
        

  其中，组件，是从外部引入的页面，类似于前面的组件，点击对应的TabBar就能显示出组件中的页面来。

  至于TabBar上图标的选择，一种是你可以自己选定图片，例如上面的
  第二种就是使用第三方图标，我这里推荐使用react-native-vector-icons，使用方法也很简单，如同上面的，这个组件库几乎可以满足任何场景下的图标展示，具体可以参照 ionicons.com