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

React 前端之家
前端之家收集整理的这篇文章主要介绍了React Native 实现基于react-native-tab-navigator库Tab切换封装，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

代码示例

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

npm install react@H_502_8@-native@H_502_8@-tab@H_502_8@-navigator –save

主页面封装

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

<TabNavigatorItem  @H_502_8@selected={this.state.selectedTab===tabName} @H_502_8@title={title} @H_502_8@titleStyle={styles.tabText} @H_502_8@selectedTitleStyle={styles.selectedTabText} @H_502_8@renderIcon={()=><Image @H_502_8@style={styles.icon} @H_502_8@source={tabNomal}/>}
        renderSelectedIcon={()=><Image @H_502_8@style={styles.icon} @H_502_8@source={tabPress}/>}

        onPress={()=>this.onPress(tabName)}
        renderBadge={()=>isBadge?<View @H_502_8@style={styles.badgeView}><Text @H_502_8@style={styles.badgeText}>15</Text></View>:null}
        >
       <View @H_502_8@style={styles.page}>
        <Text>{tabContent}</Text>
       </View>
       </TabNavigatorItem>

接下来我们需要构造一个函数，用来接收不同情况下Tab子选项卡。

@H_403_120@switch (tabName) {
        @H_403_120@case 'Home':
          tabNomal=TAB_HOME_NORMAL;
          tabPress=TAB_HOME_PRESS;

          @H_403_120@break;
       @H_403_120@case 'Mine':
        tabNomal=TAB_MINE_NORMAL;
        tabPress=TAB_MINE_PRESS;
        @H_403_120@break;
        @H_403_120@default:
      }

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

//名称，图标，子视图文本，选中状态
renderTabView(title,tabName,tabContent,isBadge){
      var tabNomal;
      var tabPress;

      @H_403_120@switch (tabName) {
        case 'Home':
          tabNomal=TAB_HOME_NORMAL;
          tabPress=TAB_HOME_PRESS;

          @H_403_120@break;
       case 'Mine':
        tabNomal=TAB_MINE_NORMAL;
        tabPress=TAB_MINE_PRESS;
        @H_403_120@break;
        @H_502_8@default:
      }

      @H_403_120@return(
       <TabNavigatorItem
        selected={@H_403_120@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={()=>@H_403_120@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>
     );
   }

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

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

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

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

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

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

那么完整的代码如下：

/**
 * Sample React Native App
 * @H_502_8@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 @H_403_120@class HelloWord @H_403_120@extends Component {
   //默认选中
   constructor(){
     @H_403_120@super();
     @H_403_120@this.state={
       @H_502_8@selectedTab:'Home',}
   }
   //点击方法
   onPress(tabName){
    @H_403_120@if(tabName){
      @H_403_120@this.setState({
          @H_502_8@selectedTab:tabName,}
      );
    }
  }

 //渲染选项卡
  renderTabView(title,defaultTab,isBadge){
       var tabNomal;
       var tabPress;
       var tabPage;
       @H_403_120@switch (tabName) {
         case 'Home':
           tabNomal=TAB_HOME_NORMAL;
           tabPress=TAB_HOME_PRESS;
           tabPage=<HomeScreen/>;
           @H_403_120@break;
        case 'Mine':
         tabNomal=TAB_MINE_NORMAL;
         tabPress=TAB_MINE_PRESS;
         tabPage=<MineScreen/>;
         @H_403_120@break;
         @H_502_8@default:
       }

       @H_403_120@return(
        <TabNavigatorItem
         selected={@H_403_120@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={()=>@H_403_120@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(){
           @H_403_120@return (
             <TabNavigator
              tabBarStyle={styles.tab}>
             {@H_403_120@this.renderTabView('首页',HomeScreen,true)}
             {@H_403_120@this.renderTabView('我的',false)}
             </TabNavigator>
           );
         }

   //渲染界面
   render() {
     var tabView=@H_403_120@this.tabBarView();
     @H_403_120@return (
       <View style={styles.container}>
              {tabView}
             </View>
     );
   }
 }

 const styles = StyleSheet.create({
   @H_502_8@container: {
     @H_502_8@flex: 1
   },@H_502_8@tabText: {
         @H_502_8@fontSize: 10,@H_502_8@color: 'black'
     },@H_502_8@selectedTabText: {
         @H_502_8@fontSize: 10,@H_502_8@color: 'green'
     },@H_502_8@tabIcon:{
     @H_502_8@width:25,@H_502_8@height:25,},@H_502_8@badgeView:{
     @H_502_8@width:22,@H_502_8@height:14,@H_502_8@backgroundColor:'#f85959',@H_502_8@borderWidth:1,@H_502_8@marginLeft:10,@H_502_8@marginTop:3,@H_502_8@borderColor:'#FFF',@H_502_8@alignItems:'center',@H_502_8@justifyContent:'center',@H_502_8@borderRadius:8,@H_502_8@badgeText:{
     @H_502_8@color:'#ffffff',@H_502_8@fontSize:8,@H_502_8@icon: {
         @H_502_8@width: 22,@H_502_8@height: 22
     },@H_502_8@page: {
         @H_502_8@flex: 1,@H_502_8@justifyContent: 'center',@H_502_8@alignItems: 'center',@H_502_8@backgroundColor: '#FFFFFF'
     },});


AppRegistry.registerComponent('HelloWord',() => HelloWord);

标题栏封装

接下来我们对标题栏进行封装，注意，标题是变化的，这时候我们想到给Text的props设置动态属性。在使用的时候直接简单的调用下即可。

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

完整代码：

/** * https://github.com/facebook/react-native * @flow */


@H_403_120@import React,{ Component } from 'react';
@H_403_120@import { View,StyleSheet} from 'react-native';
@H_403_120@var Dimensions = require('Dimensions');
@H_403_120@var ScreenWidth = Dimensions.get('window').width;

@H_403_120@class Header @H_403_120@extends Component {

    render() {
        @H_403_120@return (
          <View style={styles.container}>
           <Text style={styles.text }>{@H_403_120@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 @H_403_120@default Header;

源码地址

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作