专栏首页向治洪React Native 实现基于react-native-tab-navigator库Tab切换封装

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

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;

源码地址

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React Native之样式

    样式 React Native 不实现 CSS,而是依赖于 JavaScript 来为你的应用程序设置样式。这是一个有争议的决定,你可以阅读那些幻灯片,了解...

    xiangzhihong
  • React Native之ScrollView控件详解

    概述 ScrollView在Android和ios原生开发中都比较常见,是一个 滚动视图控件。在RN开发中,系统也给我们提供了这么一个控件。不过在RN开发中 ,...

    xiangzhihong
  • react-native 之布局总结

    前言 之前我们讲了很多react-native的基础控件,为了方便大家的理解,我们来对react-native的布局做一个总结,观看本节知识,你将看到。 宽度单...

    xiangzhihong
  • 基础篇章:React Native 之 TextInput 的讲解

    (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 今天我们讲解的是React Native基础...

    非著名程序员
  • React-Native入门指南(二)

    前辈教导我们,掌握一门新技术的最快方法是练习。因此,我找了下比较有爱,暖气的界面。当然不是给美团打广告了,只是觉得页面蛮清新的。下面就是要显示的效果:

    疯狂的技术宅
  • 将markdown中的Latex公式转换成知乎格式

    我们平时在写markdown时常常会用到latex公式,然而直接将markdown上传至知乎的话,知乎并不能正常解析公式,因为他还无法识别\$\$。

    marsggbo
  • 这 7 大笔记应用,让程序员的的代码效率翻 7 倍!

    Boostnote 是为编码器设计的笔记应用典范。它虽然不具备现代笔记应用的所有功能(例如,它具有 Markdown 格式和基于文件夹的组织功能,但缺少可自定义...

    老九君
  • 案例 | 国烨网签约法大大,电子合同赋能大宗商品交易

    大宗商品交易平台国烨网与法大大数字电子签章合作已有两年之余,为上万家企业客户带来了更便捷、更安全、更快速的签约体验。

    法大大电子合同
  • RocketMQ学习总结

    服务器上部署的RocketMq进程一般称之为Broker,Broker会接收Producer的消息,持久化到本地,然后push给Consumer,通常使用集群部...

    大王叫下
  • 设计模式 (四)——简单工厂模式(Simple Factory,创建型)

    使用设计模式可以提高代码的可复用性、可扩充性和可维护性。简单工厂模式(Simple Factory Pattern)属于创建型模式。简单工厂模式,由一个工厂对象...

    Dabelv

扫码关注云+社区

领取腾讯云代金券