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;

源码地址

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

代码示例

主页面封装

标题栏封装

相关文章