native封装卡片 react_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

主页面封装

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

title={title}

titleStyle={styles.tabText}

selectedTitleStyle={styles.selectedTabText}

renderIcon={()=>}

renderSelectedIcon={()=>}

onPress={()=>this.onPress(tabName)}

renderBadge={()=>isBadge?15:null}

>

{tabContent}

接下来我们需要构造一个函数，用来接收不同情况下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(

selected={

this.state.selectedTab===tabName}

title={title}

titleStyle={styles.tabText}

selectedTitleStyle={styles.selectedTabText}

renderIcon={

()=>}

renderSelectedIcon={

()=>}

onPress={

()=>this.onPress(tabName)}

renderBadge={

()=>isBadge?15:null}

>

{tabContent}

);

}

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

{

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

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

tabBarView(){

return (

tabBarStyle={styles.tab}>

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

{renderTabView('我的','Mine','我的模块',false)}

);

}

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

render() {

var tabView=tabBarView();

return (

{tabView}

);

}

那么完整的代码如下：

/**

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

break;

case 'Mine':

tabNomal=TAB_MINE_NORMAL;

tabPress=TAB_MINE_PRESS;

tabPage=;

break;

default:

}

return(

selected={

this.state.selectedTab===tabName}

title={title}

titleStyle={styles.tabText}

selectedTitleStyle={styles.selectedTabText}

renderIcon={

()=>}

renderSelectedIcon={

()=>}

onPress={

()=>this.onPress(tabName)}

renderBadge={

()=>isBadge?15:null}

>

{tabPage}

);

}

//自定义TabView

tabBarView(){

return (

tabBarStyle={styles.tab}>

{

this.renderTabView('首页','Home',HomeScreen,true)}

{

this.renderTabView('我的','Mine',HomeScreen,false)}

);

}

//渲染界面

render() {

var tabView=this.tabBarView();

return (

{tabView}

);

}

}

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

完整代码：

/**

* 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 (

{

this.props.text || "标题头"}

);

}

}

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;

本文同步分享在 博客“xiangzhihong8”(CSDN)。

如有侵权，请联系 support@oschina.cn 删除。

本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。