React Native 实现基于react-native-tab-navigator库Tab切换封装
React Native 实现基于react-native-tab-navigator库Tab切换封装
xiangzhihong
发布于 2018-02-06 16:18:52
发布于 2018-02-06 16:18:52
react-native-tab-navigator是一款Tab切换的库，细心的读者可能注意到了对于TabNavigator.Item选项卡部分，代码功能上基本上是重复的，对此，我们能不能对这种有相同功能的代码进行二次封装呢？
这里写图片描述
代码示例
新建项目，并安装react-native-tab-navigator库支持
npm install react-native-tab-navigator –save主页面封装
首先我们可以将功能的部分抽出来。
<TabNavigatorItem
selected={this.state.selectedTab===tabName}
title={title}
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={()=><Image style={styles.icon} source={tabNomal}/>}
renderSelectedIcon={()=><Image style={styles.icon} source={tabPress}/>}
onPress={()=>this.onPress(tabName)}
renderBadge={()=>isBadge?<View style={styles.badgeView}><Text style={styles.badgeText}>15</Text></View>:null}
>
<View style={styles.page}>
<Text>{tabContent}</Text>
</View>
</TabNavigatorItem>接下来我们需要构造一个函数，用来接收不同情况下Tab子选项卡。
switch (tabName) {
case 'Home':
tabNomal=TAB_HOME_NORMAL;
tabPress=TAB_HOME_PRESS;
break;
case 'Mine':
tabNomal=TAB_MINE_NORMAL;
tabPress=TAB_MINE_PRESS;
break;
default:
}所以构造的完整的代码如：
//名称，图标，子视图文本，选中状态
renderTabView(title,tabName,tabContent,isBadge){
var tabNomal;
var tabPress;
switch (tabName) {
case 'Home':
tabNomal=TAB_HOME_NORMAL;
tabPress=TAB_HOME_PRESS;
break;
case 'Mine':
tabNomal=TAB_MINE_NORMAL;
tabPress=TAB_MINE_PRESS;
break;
default:
}
return(
<TabNavigatorItem
selected={this.state.selectedTab===tabName}
title={title}
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={()=><Image style={styles.icon} source={tabNomal}/>}
renderSelectedIcon={()=><Image style={styles.icon} source={tabPress}/>}
onPress={()=>this.onPress(tabName)}
renderBadge={()=>isBadge?<View style={styles.badgeView}><Text style={styles.badgeText}>15</Text></View>:null}
>
<View style={styles.page}>
<Text>{tabContent}</Text>
</View>
</TabNavigatorItem>
);
}其实到此，我们已经实现了封装，在使用的时候按如下方式直接使用即可：
{this.renderTabView('首页','Home','首页模块',true)}但是，我们对上面的内容还可以进一步的封装：
tabBarView(){
return (
<TabNavigator
tabBarStyle={styles.tab}>
{renderTabView('首页','Home','首页模块',true)}
{renderTabView('我的','Mine','我的模块',false)}
</TabNavigator>
);
}然后，我们在render()只需要简单的调用即可：
render() {
var tabView=tabBarView();
return (
<View style={styles.container}>
{tabView}
</View>
);
}那么完整的代码如下：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import TabNavigator from 'react-native-tab-navigator';
import HomeScreen from './src/widght/HomeScreen';
import MineScreen from './src/widght/MineScreen';
import {
AppRegistry,
StyleSheet,
Text,
Image,
View
} from 'react-native';
const TabNavigatorItem =TabNavigator.Item;
//默认选项
const TAB_HOME_NORMAL=require('./image/tabbar_homepage.png');
const TAB_MINE_NORMAL=require('./image/tabbar_mine.png');
//选中
const TAB_HOME_PRESS=require('./image/tabbar_homepage_selected.png');
const TAB_MINE_PRESS=require('./image/tabbar_mine_selected.png');
export default class HelloWord extends Component {
//默认选中
constructor(){
super();
this.state={
selectedTab:'Home',
}
}
//点击方法
onPress(tabName){
if(tabName){
this.setState({
selectedTab:tabName,
}
);
}
}
//渲染选项卡
renderTabView(title,tabName,defaultTab,isBadge){
var tabNomal;
var tabPress;
var tabPage;
switch (tabName) {
case 'Home':
tabNomal=TAB_HOME_NORMAL;
tabPress=TAB_HOME_PRESS;
tabPage=<HomeScreen/>;
break;
case 'Mine':
tabNomal=TAB_MINE_NORMAL;
tabPress=TAB_MINE_PRESS;
tabPage=<MineScreen/>;
break;
default:
}
return(
<TabNavigatorItem
selected={this.state.selectedTab===tabName}
title={title}
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={()=><Image style={styles.icon} source={tabNomal}/>}
renderSelectedIcon={()=><Image style={styles.icon} source={tabPress}/>}
onPress={()=>this.onPress(tabName)}
renderBadge={()=>isBadge?<View style={styles.badgeView}><Text style={styles.badgeText}>15</Text></View>:null}
>
<View style={styles.page}>
{tabPage}
</View>
</TabNavigatorItem>
);
}
//自定义TabView
tabBarView(){
return (
<TabNavigator
tabBarStyle={styles.tab}>
{this.renderTabView('首页','Home',HomeScreen,true)}
{this.renderTabView('我的','Mine',HomeScreen,false)}
</TabNavigator>
);
}
//渲染界面
render() {
var tabView=this.tabBarView();
return (
<View style={styles.container}>
{tabView}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
tabText: {
fontSize: 10,
color: 'black'
},
selectedTabText: {
fontSize: 10,
color: 'green'
},
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:'#ffffff',
fontSize:8,
},
icon: {
width: 22,
height: 22
},
page: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF'
},
});
AppRegistry.registerComponent('HelloWord', () => HelloWord);标题栏封装
接下来我们对标题栏进行封装，注意，标题是变化的，这时候我们想到给Text的props设置动态属性。在使用的时候直接简单的调用下即可。
<Header text='首页'> </Header>完整代码：
/**
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import { View, Text,StyleSheet} from 'react-native';
var Dimensions = require('Dimensions');
var ScreenWidth = Dimensions.get('window').width;
class Header extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text }>{this.props.text || "标题头"}</Text>
<Text style={styles.diviceLine}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
width:ScreenWidth,
marginTop:20,
height:50,
alignItems:'center', /*水平居中*/
justifyContent:'center',/*垂直居中*/
backgroundColor: '#FFFFFF',
flexDirection:'column'
},
text: {
fontSize: 18,
color:'#000000',
textAlign:'center'
},
diviceLine: {
backgroundColor: '#e9e9e9',
height: 1,
}
});
export default Header;本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-05-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录