<p>之前的文章讲述了在RN项目中如何使用NavigationBar，如何调用原生模块，以及集成下拉刷新和上拉加载更多的功能，今天介绍一个第三方插件 <a href="/misc/goto?guid=4959677029066858666" rel="nofollow,noindex">react-native-tab-navigator</a> ，讲述我是如何使用它在RN项目中使用TabBar</p>    <p><a href="/misc/goto?guid=4959677029155723288" rel="nofollow,noindex">项目源码在这里</a></p>    <ol>     <li> <p>安装插件</p> <pre>  <code class="language-javascript">npm install react-native-tab-navigator --save</code></pre> </li>     <li> <p>使用</p> <p>就我的demo来说：</p> <p>Demo中包含了Navigator管理的一系列视图，我尝试过使用一个 Tab 管理多个由 Navigator 管理的一系列视图</p> <p>(这跟我之前的iOS开发经验有关，在iOS中 Application 的根视图是 TabBarController ，这个 TabBarController 管理多个由 NavigationController 管理的一系列 ViewController ）</p> <p>但是这有一个问题：</p> <p>场景切换的时候可能有隐藏TabBar的需求，按照刚才说的方法，我需要set一个值来控制tabbar的 height 和 overflow ，又由于 component 的生命周期函数中没有类似于iOS中 -（void)viewWillAppear; 的方法，所以没有很好的方法把隐藏的tabbar再显示出来（如果你有解决这个问题的方法，请告诉我）。</p> <p>那么换一种思路：</p> <p>把管理一系列视图的 Tab 交由一个 Navigator 管理，虽然这样违背了iOS开发的普通思路，但是就目前在RN项目中，没有发现太大的问题（有一个问题是只有一级页面显示TabBar，所有二级页面全部不显示，不过就国内大多数应用设计风格来看，这个问题也不算是问题）。</p> </li>     <li> <p>react-native-vector-icons<br> 这是一个图标库，有兴趣话可以 <a href="/misc/goto?guid=4959664598568602848" rel="nofollow,noindex">去这里</a> 深入了解，简单使用请执行下边两条命令即可</p> <pre>  <code class="language-javascript">$ npm install react-native-vector-icons --save   $ rnpm link</code></pre> <p>使用：</p> <pre>  <code class="language-javascript">import Icon from 'react-native-vector-icons/Ionicons';   <Icon name={ 'ios-home' }</code></pre> </li>     <li> <p>关键部分代码</p> <pre>  <code class="language-javascript">//root.js   import React from 'react'   import {       Navigator   } from 'react-native';   import { Provider } from 'react-redux'   import configureStore from './store/store.js'   import App from './containers/app.js'   const store = configureStore();     class Root extends React.Component {       render() {           return (               <Provider store={ store }>                   //在原来<App />的基础上添加Navigator                   <Navigator                        initialRoute={{ component: App }}                       configureScene={(route) => {                           return Navigator.SceneConfigs.FloatFromRight;                       }}                       renderScene={(route, navigator) => {                           let Component = route.component;                           return <Component {...route.params} navigator={navigator} />                       }} />               </Provider>           );       }   }   export default Root;     //----------------------   //app.js  ( render(){} )      render() {       const { reducer } = this.props;       console.log("============",reducer.tabbarHeight);       return (           <TabNavigator tabBarStyle={{ backgroundColor:'white' }} style={{backgroundColor: 'white'}}>                  <TabNavigator.Item                   title="主页"                   selected={this.state.selectedTab === 'home'}                   renderIcon={() => <Icon name={ 'ios-home' } size={30} color={'gray'}/>}                   renderSelectedIcon={() => <Icon name={ 'ios-home' } size={30} color={'#4E78E7'}/>}                   onPress={() => this.setState({ selectedTab: 'home' })}>                   <ProductListContainer {...this.props} />               </TabNavigator.Item>               <TabNavigator.Item                   title="其他"                   selected={this.state.selectedTab === 'other'}                   renderIcon={() => <Icon name={ 'ios-more' } size={30} color={'gray'}/>}                   renderSelectedIcon={() => <Icon name={ 'ios-more' } size={30} color={'#4E78E7'}/>}                   onPress={() => this.setState({ selectedTab: 'other' })}>                   <OtherContainer {...this.props}/>               </TabNavigator.Item>           </TabNavigator>       );   }</code></pre> </li>     <li> <p>效果图</p> <img src="https://simg.open-open.com/show/08e60cd6969f314108fe47fc4c697967.gif"> <p>tabba</p> </li>    </ol>    <p> </p>    <p>来自：http://www.jianshu.com/p/7a4899bde137</p>    <p> </p>    <p><span style="background:rgb(189, 8, 28) url("data:image/svg+xml; border-radius:2px; border:medium none; color:rgb(255, 255, 255); cursor:pointer; display:none; font:bold 11px/20px "Helvetica Neue",Helvetica,sans-serif; opacity:1; padding:0px 4px 0px 0px; position:absolute; text-align:center; text-indent:20px; width:auto; z-index:8675309">Save</span></p>