React Native - TabBar的Android实现

APP首页常用的底部Button切换显示页。
IOS有官方的TabBarIOS可以实现，而Android暂时没有提供官方UI。
这里分享一个自己的简单实现，没有使用第三方库。

render() {
  return (
    <View style={styles.container}>
      //底部Tab布局
      <WmTab callbackParent={(val) => {this.onTabChange(val)}}/>
      //主视图内容
      <View style = {styles.content}>
        {this.renderContent()}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
    container:{
        flex : 1,
        width : width,
        flexDirection : 'column-reverse', //从下往上绘制
    },
    content:{
        flex : 1 //占据剩下空间
    }
});

完整代码见最下方

2. 实现底部三按钮Tab布局（WmTab）

tab.png

（1）先定义好资源。


        const image = [      require('./img/icon_tab_home.png'),
                                require('./img/icon_tab_info.png'),
                                require('./img/icon_tab_me.png')];

        const imageSelect = [   require('./img/icon_tab_home_pressed.png'),
                                require('./img/icon_tab_info_pressed.png'),
                                require('./img/icon_tab_me_pressed.png')];
        
        const str = [         '报志愿','高考攻略','我的'];

（2）实现Tab按钮，三个样式一样，只要使用不同资源内容就可，使用数组下标0，1，2。

WmTab.js

render() {
  //上述资源内容...
  return (
    //第一个按钮
    <TouchableWithoutFeedback   
        style={styles.tabItem}
        onPress={this.onTabSelect.bind(this, 'home-first')}>
      <View style={styles.tabItem}>
        <Image 
              style={styles.image}
              source={this.state.tab === 'home-first'?imageSelect[0]:image[0]}/>
        <Text   
          style = {
              styles.text,
              {color : this.state.tab === 'home-first'?'#00aff0':'#9E9EAE'}
          }>
          {str[0]}
        </Text>
      </View>
    </TouchableWithoutFeedback>

    //第二个按钮
    <TouchableWithoutFeedback 
      ...
    </TouchableWithoutFeedback>

    //第三个按钮
    <TouchableWithoutFeedback 
      ...
    </TouchableWithoutFeedback>
  )
};

const styles = StyleSheet.create({
    container:{
        flex : 1,
        width : width,
        flexDirection : 'column-reverse',
    },
    content:{
        flex : 1
    },
    
    text:{
        color : 'white',
    }
});

完整代码见最下方

3. 主视图布局：

主视图就是一个简单的View，赋予了一个背景颜色（红、绿、黑）。
为了后面可扩展，把每一个View单独成一个组件，下面给出红主视图，其他的只要更换背景颜色即可。

Home.js

import React,{ Component } from 'react';

import{
    View,
    StyleSheet
} from 'react-native';

export default class Home extends Component{
    render(){
        return(
            <View style={styles.container}></View>
        );
    }
}

const styles = StyleSheet.create({
    container : {
        flex : 1,
        backgroundColor : 'red' //其他主视图更换这个颜色即可，原样复制代码。
    }
});

4. 用事件将各个组件串通起来

这里需要先明白如何让父子组件之间通信，让底部按钮事件传递出来，让父组件收到通知，更换主视图内容。

因为外部基础框架（WmzyNavigator.js），包含着底部Tab布局（WmTab.js），那么就是要让WmzyNavigator.js和WmTab.js实现通信。

方法是从WmzyNavigator往WmTab里传递一个事件callbackParent。

当WmTab里面的Tab点击时，触发callbackParent，并把点击了哪个按钮的信息传递出来，WmzyNavigator收到这个信息后刷新页面，根据这个信息决定要加载那一个主视图。

WmzyNavigator

定义全局变量，用于记录当前显示的是哪个主视图的内容

constructor(props) {  
    super(props);
    this.state = { tab : 'home-first' };  
}

那么首先给WmzyNavigator一个刷新事件，用于点击时触发。

onTabChange(tab : string){
    if (this.state.tab !== tab) {
        this.setState({tab:tab});
    }
}

再把这个事件往WmTab里面传递。

<WmTab callbackParent={(val) => {this.onTabChange(val)}}/>

当WmTab触发了callbackParent
WmzyNavigator收到通知就会调用onTabChange()，重新setState()，WmzyNavigator就会重新渲染，调用renderContent()重新去渲染主视图。

<View style = {styles.content}>
    {this.renderContent()}
</View>

renderContent() {
    switch(this.state.tab){
        case 'home-first':{
            return <Home/>
        }
        case 'home-second':{
            return <GkInfo/>    
        }
        case 'home-third':{
            return <MyRoom/>    
        }
    }
}

WmTab

也定义一个tab，用来记录当前点击了那一个按钮。

constructor(props) {  
    super(props);  
    this.state = { tab: 'home-first' };  
}

声明一个点击方法，用于点击Tab时触发，目的：
1.改变当前变量tab。
2.触发setState()，重新渲染布局，改变按钮和文字的颜色。
3.触发从父组件获取到的方法callbackParent（），把tab信息传递出去。

onTabSelect (tab : string){
    if (this.state.tab !== tab) {
        this.setState({tab: tab});
        this.props.callbackParent(tab);
    }
}

Tab按钮的点击事件

<TouchableWithoutFeedback 
    onPress={this.onTabSelect.bind(this, 'home-first')}
<TouchableWithoutFeedback/>

由此便可把底部Tab的点击事件传递出去，并让主视图重新渲染。

三. 主要组件源码：

WmzyNavigator.js

import React,{ Component } from 'react';

import {Dimensions} from "react-native";
const {width, height} = Dimensions.get('window');

import WmTab from './common/WmTab';
import Home from './home/Home';
import GkInfo from './info/GkInfo';
import MyRoom from './me/MyRoom';

import{
    View,
    Text,
    StyleSheet
} from 'react-native';

export default class WmzyNavigator extends Component{

    constructor(props) {  
        super(props);  
        this.state = { tab : 'home-first' };  
    }  

    onTabChange(tab : string){
        if (this.state.tab !== tab) {
            this.setState({tab:tab});
        }
    }

    renderContent() {
        switch(this.state.tab){
            case 'home-first':{
                return <Home/>
            }
            case 'home-second':{
                return <GkInfo/>    
            }
            case 'home-third':{
                return <MyRoom/>    
            }
        }
    }

    render() {

        return (
            <View style={styles.container}>
                <WmTab callbackParent={(val) => {this.onTabChange(val)}}/>
                <View style = {styles.content}>
                    {this.renderContent()}
                </View>
            </View>
        );
    }

};


const styles = StyleSheet.create({
    container:{
        flex : 1,
        width : width,
        flexDirection : 'column-reverse',
    },
    content:{
        flex : 1
    }
});

WmTab.js: （建议复制到IDE中查看，简书这个换行简直了。）

import React,{ Component,PropTypes } from 'react';

import{
    View,
    Text,
    Image,
    StyleSheet,
    TouchableHighlight
} from 'react-native';

import WmLine from './WmLine';

export default class WmTab extends Component{

    constructor(props) {  
        super(props);  
        this.state = { tab: 'home-first' };  
    }
    
    onTabSelect (tab : string){
        if (this.state.tab !== tab) {
            this.setState({tab: tab});
            this.props.callbackParent(tab);
        }
    }

    render(){
        const image = [      require('../img/icon_tab_home.png'),
                                require('../img/icon_tab_info.png'),
                                require('../img/icon_tab_me.png')];

        const imageSelect = [   require('../img/icon_tab_home_pressed.png'),
                                require('../img/icon_tab_info_pressed.png'),
                                require('../img/icon_tab_me_pressed.png')];
        
        const str = [         '报志愿','高考攻略','我的'];
        


        return(
            <View style = {styles.container} key={this.state.tab}>
                <WmLine/>
            
                <View style = {styles.tab} >
                    <TouchableHighlight     style={styles.tabItem}
                                            onPress={this.onTabSelect.bind(this, 'home-first')}>
                        <View   style={styles.tabItem}>
                            <Image  style={styles.image}
                                    source={this.state.tab === 'home-first'?imageSelect[0]:image[0]} />
                            <Text   style = {styles.text,{color : this.state.tab === 'home-first'?'#00aff0':'#9E9EAE'}}>
                                {str[0]}
                            </Text>
                        </View>
                    </TouchableHighlight>
                    <TouchableHighlight     style={styles.tabItem}
                                            onPress={this.onTabSelect.bind(this, 'home-second')}>
                        <View   style={styles.tabItem}>
                            <Image  style={styles.image}
                                    source={this.state.tab === 'home-second'?imageSelect[1]:image[1]}/>
                            <Text   style = {styles.text,{color : this.state.tab === 'home-second'?'#00aff0':'#9E9EAE'}}>
                                {str[1]}
                            </Text>
                        </View>
                    </TouchableHighlight>
                    <TouchableHighlight     style={styles.tabItem}
                                            onPress={this.onTabSelect.bind(this, 'home-third')}>
                        <View   style={styles.tabItem}>
                            <Image  style={styles.image}
                                    source={this.state.tab === 'home-third'?imageSelect[2]:image[2]}/>
                            <Text   style = {styles.text,{color : this.state.tab === 'home-third'?'#00aff0':'#9E9EAE'}}>
                                {str[2]}
                            </Text>
                        </View>
                    </TouchableHighlight>
                </View>
            </View>
        );
    }


}

const styles = StyleSheet.create({
    container:{
        height : 50
    },
    tab:{
        height : 49,
        flexDirection : 'row',
        backgroundColor : 'white'
    },
    image:{
        width : 30,
        height : 30
    },
    tabItem:{
        flex : 1,
        justifyContent: 'center',
        alignItems : 'center'
    },
    text:{
        color : '#9E9EAE',
        fontSize : 11
    }
});

四. 可运行源码地址。

GitHub地址

最后编辑于：2017.12.08 03:34:42

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 202,723评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,080评论 2赞 379
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,604评论 0赞 335
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,440评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,431评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,499评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,893评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,541评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,751评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,547评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,619评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,320评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,890评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,896评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,137评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,796评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,335评论 2赞 342

React Native - TabBar的Android实现

React Native - TabBar的Android实现

目录：

一.效果图

二.实现逻辑及顺序

1. 定义好外部基础框架，便于包含主视图和底部Tab

2. 实现底部三按钮Tab布局（WmTab）

3. 主视图布局：

4. 用事件将各个组件串通起来

三. 主要组件源码：

WmzyNavigator.js

WmTab.js: （建议复制到IDE中查看，简书这个换行简直了。）

四. 可运行源码地址。

推荐阅读更多精彩内容