React Native 实现基于react-native-tab-navigator库Tab切换封装

来源：互联网发布：淘宝卖无印良品的好店编辑：程序博客网时间：2024/06/12 23:05

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;

源码地址

2 2