React Native之Android Tabbar的实现.（ios 为TabBarIOS

最新推荐文章于 2024-07-18 15:48:35 发布

weixin_34301132

最新推荐文章于 2024-07-18 15:48:35 发布

阅读量87

点赞数

文章标签：移动开发 javascript python ViewUI

原文链接：https://my.oschina.net/u/2933456/blog/845567

版权

2019独角兽企业重金招聘Python工程师标准>>>

一个不错的跨平台开源模块：https://github.com/exponentjs/react-native-tab-navigator

接下来我来简单说明如何应用，首先进入到项目的根目录引入开源支持包：

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

确保支持包导入进来.

使用简介：

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

通过使用简介我们可以了解该组件如何使用，但是复杂的UI操作就得需要查看源码了解究竟了，，比如：我们要如何修改TabNavigator.Item的title样式和badgeText的样式.

源码如下：

export default class TabNavigatorItem extends React.Component {
static propTypes = {
renderIcon: PropTypes.func,
renderSelectedIcon: PropTypes.func,
badgeText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
renderBadge: PropTypes.func,
title: PropTypes.string,
titleStyle: Text.propTypes.style,
selectedTitleStyle: Text.propTypes.style,
tabStyle: View.propTypes.style,
selected: PropTypes.bool,
onPress: PropTypes.func,
allowFontScaling: PropTypes.bool,
};

可以看出renderIcon和renderSelectedIcon对应的PropTypes.func方法，个人感觉这么做非常好，可自定义性非常大，

selectedTitleStyle字面意思可以看出是选中文字的样式，而renderBadge对应的是渲染Badge的方法.

比如：

<TabNavigator.Item
title='头条'
renderIcon={()=><Image style={styles.tabIcon} source={TAB_NORMAL_1}/>}
renderSelectedIcon={()=><Image style={styles.tabIcon} source={TAB_PRESS_1}/>}
selected={this.state.selectedTab==='Home'}
selectedTitleStyle={{color:'#f85959'}}
onPress={()=>this.onPress('Home')}
renderBadge={()=><View style={styles.badgeView}><Text style={styles.badgeText}>15</Text></View>}
>

最后贴下全部代码：

/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
} from 'react-native';

//引入tabbar支持包
import TabNavigator from 'react-native-tab-navigator';

const TabNavigatorItem =TabNavigator.Item;

const TAB_NORMAL_1=require('./images/tabbar_1.png');
const TAB_NORMAL_2=require('./images/tabbar_2.png');
const TAB_NORMAL_3=require('./images/tabbar_3.png');
const TAB_NORMAL_4=require('./images/tabbar_4.png');

const TAB_PRESS_1=require('./images/tabbar_1_press.png');
const TAB_PRESS_2=require('./images/tabbar_2_press.png');
const TAB_PRESS_3=require('./images/tabbar_3_press.png');
const TAB_PRESS_4=require('./images/tabbar_4_press.png');

class toutiao extends Component {

constructor(){
super();
this.state={
selectedTab:'Home',
}
}

/**
tab点击方法
**/
onPress(tabName){
if(tabName){
this.setState(
{
selectedTab:tabName,
}
);
}
}
/**
渲染每项
**/
renderTabView(title,tabName,tabContent,isBadge){
var tabNomal;
var tabPress;
switch (tabName) {
case 'Home':
tabNomal=TAB_NORMAL_1;
tabPress=TAB_PRESS_1;
break;
case 'Video':
tabNomal=TAB_NORMAL_2;
tabPress=TAB_PRESS_2;
break;
case 'Follow':
tabNomal=TAB_NORMAL_3;
tabPress=TAB_PRESS_3;
break;
case 'Mine':
tabNomal=TAB_NORMAL_4;
tabPress=TAB_PRESS_4;
break;
default:

}
return(
<TabNavigatorItem
title={title}
renderIcon={()=><Image style={styles.tabIcon} source={tabNomal}/>}
renderSelectedIcon={()=><Image style={styles.tabIcon} source={tabPress}/>}
selected={this.state.selectedTab===tabName}
selectedTitleStyle={{color:'#f85959'}}
onPress={()=>this.onPress(tabName)}
renderBadge={()=>isBadge?<View style={styles.badgeView}><Text style={styles.badgeText}>15</Text></View>:null}
>
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}><Text>{tabContent}</Text></View>
</TabNavigatorItem>
);
}

/**
自定义tabbar
**/
tabBarView(){
return (
<TabNavigator
tabBarStyle={styles.tab}
>
{this.renderTabView('头条','Home','头条板块',true)}
{this.renderTabView('视频','Video','视频板块',false)}
{this.renderTabView('关注','Follow','关注板块',false)}
{this.renderTabView('我的','Mine','我的板块',false)}
</TabNavigator>
);
}

render() {
var tabBarView=this.tabBarView();
return (
<View style={styles.container}>
{tabBarView}
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
tab:{
height: 52,
alignItems:'center',
backgroundColor:'#f4f5f6',
},
tabIcon:{
width:25,
height:25,
},
badgeView:{
width:22,
height:14 ,
backgroundColor:'#f85959',
borderWidth:1,
marginLeft:10,
marginTop:3,
borderColor:'#FFF',
alignItems:'center',
justifyContent:'center',
borderRadius:8,
},
badgeText:{
color:'#fff',
fontSize:8,
}
});