之前的文章讲述了在RN项目中如何使用NavigationBar，如何调用原生模块，以及集成下拉刷新和上拉加载更多的功能，今天介绍一个第三方插件react-native-tab-navigator，讲述我是如何使用它在RN项目中使用TabBar

项目源码在这里

  1. 安装插件

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

  2. 使用
    就我的demo来说：
    Demo中包含了Navigator管理的一系列视图，我尝试过使用一个Tab管理多个由Navigator管理的一系列视图
    (这跟我之前的iOS开发经验有关，在iOS中Application的根视图是TabBarController，这个TabBarController管理多个由NavigationController管理的一系列ViewController）

    但是这有一个问题：

    场景切换的时候可能有隐藏TabBar的需求，按照刚才说的方法，我需要set一个值来控制tabbar的height和overflow，又由于component的生命周期函数中没有类似于iOS中-（void)viewWillAppear;的方法，所以没有很好的方法把隐藏的tabbar再显示出来（如果你有解决这个问题的方法，请告诉我）。

    那么换一种思路：

    把管理一系列视图的Tab交由一个Navigator管理，虽然这样违背了iOS开发的普通思路，但是就目前在RN项目中，没有发现太大的问题（有一个问题是只有一级页面显示TabBar，所有二级页面全部不显示，不过就国内大多数应用设计风格来看，这个问题也不算是问题）。

  3. react-native-vector-icons
    这是一个图标库，有兴趣话可以去这里深入了解，简单使用请执行下边两条命令即可

    1
    2
    $ npm install react-native-vector-icons --save
    $ rnpm link

    使用：

    1
    2
    import Icon from 'react-native-vector-icons/Ionicons';
    <Icon name={ 'ios-home' }

  4. 关键部分代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    //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;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    //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>
           );
       }

  5. 效果图

    tabba

赏

本文地址： http://yongqianvip.github.io/2016/08/16/RN_TabBar/