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

react-native-tab-navigator是一款Tab切换的库，细心的读者可能注意到了对于TabNavigator.Item选项卡部分，代码功能上基本上是重复的，对此，我们能不能对这种有相同功能的代码进行二次封装呢？

代码示例

新建项目，并安装react-native-tab-navigator库支持

代码语言：javascript复制

npm install react-native-tab-navigator –save

主页面封装

首先我们可以将功能的部分抽出来。

代码语言：javascript复制

<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子选项卡。

代码语言：javascript复制

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:
      }

所以构造的完整的代码如：

代码语言：javascript复制

//名称，图标，子视图文本，选中状态
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>
     );
   }

其实到此，我们已经实现了封装，在使用的时候按如下方式直接使用即可：

代码语言：javascript复制

{this.renderTabView('首页','Home','首页模块',true)}

但是，我们对上面的内容还可以进一步的封装：

代码语言：javascript复制

tabBarView(){
          return (
            <TabNavigator
             tabBarStyle={styles.tab}>
            {renderTabView('首页','Home','首页模块',true)}
            {renderTabView('我的','Mine','我的模块',false)}
            </TabNavigator>
          );
        }

然后，我们在render()只需要简单的调用即可：

代码语言：javascript复制

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

那么完整的代码如下：

代码语言：javascript复制

/**
 * 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设置动态属性。在使用的时候直接简单的调用下即可。

代码语言：javascript复制

<Header text='首页'> </Header>

完整代码：

代码语言：javascript复制

/**
 * 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;

源码地址

reactnative

0 人点赞