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('首页',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,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('首页',HomeScreen,true)}
{this.renderTabView('我的',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,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;
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。