本文共 2720 字，大约阅读时间需要 9 分钟。

React Native默认提供了TabBarIOS组件用于提供视图切换功能，但这个组件是不能跨平台的，如果希望在Android平台上实现TabBar功能需要自己使用第三方js库，我在GitHub上找到了一个组件用于安卓上的TabBar实现。它的效果如下：

        首先需要安装组件到你的项目中，在你的项目所在文件夹通过命令行执行：

    npm install react-native-tab-navigator --save

        接着在项目头引入该组件：

    import TabNavigator from 'react-native-tab-navigator';

        最后在你的视图中通过标签<TabNavigator>来使用该组件，在<TabNavigator.Item>标签内渲染每个标签页。

<TabNavigator>常用的属性有：

• sceneStyle：定义视图区域的样式
• tabBarStyle：定义底部标签栏的样式
• tabBarShadowStyle：定义底部标签栏阴影样式

   例如要隐藏底部标签栏：

<TabNavigator.Item>常用属性有：

• title：定义图标底部显示的文字
• badgeText：定义图标右上角显示的角标
• selected：为true时代表当前页面被选中。通过与this.state.selectedTab进行比较来判断当前页是否被选中。
• renderIcon：定义图标的渲染方法。
• renderSelectedIcon：定义图标被激活时的渲染方法。如果不指定，默认渲染为蓝色背景。
• onPress：点击触发的函数。一般当点击时调用setState方法修改state中selectedTab来切换当前被选中的页面。

例如：

     
    
     }    renderSelectedIcon={()=>
     }    onPress={()=>{this.setState({selectedTab:'home'})}}  >    
           
      
       首页
          
       
    
   

完整的代码如下：

/*TabNavigatorDemo*/import React, { Component } from 'react';import {  Platform,  StyleSheet,  Text,  View,  Image,} from 'react-native';import TabNavigator from 'react-native-tab-navigator';export default class App extends Component{  constructor(props){    super(props);    this.state={      selectedTab:'home'    }  }  render(){    return(      
           
    
     
      TabNavigator组件
     
            
              
     
      }                             renderSelectedIcon={()=>
      }                             onPress={()=>{this.setState({selectedTab:'home'})}}          >            
                    
       
        首页
                   
                
               
     
      }                             renderSelectedIcon={()=>
      }                             onPress={()=>{this.setState({selectedTab:'category'})}}          >            
                    
       
        分类详情
                   
                
               
     
      }                             renderSelectedIcon={()=>
      }                             onPress={()=>{this.setState({selectedTab:'find'})}}          >            
                    
       
        发现更多
                   
                
               
     
      }                             onPress={()=>{this.setState({selectedTab:'mine'})}}          >            
                    
       
        我的空间
                   
                
             
          
       )  }}const styles=StyleSheet.create({  container:{    flex: 1,    backgroundColor: '#F5FCFF',  },  header:{    height:50,    backgroundColor:'#bcfffd',    justifyContent:'center',    alignItems:'center'  },  pageView:{    flex:1,    justifyContent:'center',    alignItems:'center'  },  iconImg:{    width:25,    height:25  },  iconActive:{    width:35,    height:35  }});