React-Native项目中使用TabBar

来源:互联网 时间:2017-01-22


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


项目源码在这里



安装插件


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


使用


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


但是这有一个问题:


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


那么换一种思路:


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



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


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

使用:


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


关键部分代码


 //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>
);
}


效果图



tabba




相关阅读:
Top