底部TabsFooter

Demo简单描述：点击底部菜单可切换页面，并且底部为共用。

这个是在设置好导航Navigator之后进行的步骤，只是我个人进行Tab切换的一种思路方法，或许不是最好的，仅供参考一下。

 

首先我们需要一个全局变量来方便我们进行Tab的当前页面active判断及页面路由的改变，添加currentActiveTab.js:

// 默认为首页
export default{
    currentActiveFooterTab: "home"
}

接着我们来写<TabsFooter>，通过全局变量currentActiveFooterTab来判断当前页面Tab的active,同时也要点击可进行页面切换：

TabsFooter.js:

import React, { Component } from 'react';
import {
    Navigator
} from 'react-native';
import {
    Button,
    Container,
    Content,
    Footer,
    FooterTab,
    Header,
    Icon,
    Title
} from 'native-base';

import CourseListView from '../views/CourseListView.js';
import PersonView from './PersonView.js';

import myTheme from '../themes/myTheme';
import CurrentActiveTab from '../services/currentActiveTab.js';

export default class TabsFooter extends Component {
    constructor(props) {
        super(props);
        this.homeTab = false;
        this.liveTab = false;
        this.spaceTab = false;
        this.personTab = false;
        if (CurrentActiveTab.currentActiveFooterTab == 'home') {
            this.homeTab = true;
        }
        if (CurrentActiveTab.currentActiveFooterTab == 'live') {
            this.liveTab = true;
        }
        if (CurrentActiveTab.currentActiveFooterTab == 'space') {
            this.spaceTab = true;
        }
        if (CurrentActiveTab.currentActiveFooterTab == 'person') {
            this.personTab = true;
        }
    }

    _navigate(name, component, type = 'Normal') {
        this.props.navigator.push({
            component: component,
            name: name,
            passProps: {
                name: name
            },
            type: type
        })
    }

    render() {
        return (
            <FooterTab theme={myTheme}>
                <Button transparent active={this.homeTab} onPress={
                    ()=>{if(CurrentActiveTab.currentActiveFooterTab != 'home') this._navigate('首页',CourseListView)}
                }>
                    <Icon name='ios-home'/>首页
                </Button>
                <Button transparent active={this.liveTab}>
                    <Icon name='logo-youtube'/>直播
                </Button>
                <Button transparent active={this.spaceTab}>
                    <Icon name='md-chatbubbles'/>广场
                </Button>
                <Button transparent active={this.personTab} onPress={
                    ()=>{if(CurrentActiveTab.currentActiveFooterTab != 'person') this._navigate('个人',PersonView)}
                }>
                    <Icon name='md-person'/>个人
                </Button>
            </FooterTab>
        )
    }
};

在首页的页面，也就是“课程”页面，我们要进行全局变量的改变，同时也要将navigator传到TabsFooter中：

import React, { Component } from 'react';
import {
    Navigator,
    Text
} from 'react-native';
import {
    Button,
    Container,
    Content,
    Footer,
    FooterTab,
    Header,
    Icon,
    Title
} from 'native-base';

import CourseDetailView from './CourseDetailView.js';
import TabsFooter from './TabsFooter.js';

import myTheme from '../themes/myTheme';
import CurrentActiveTab from '../services/currentActiveTab.js';

export default class CourseListView extends Component {
    constructor(props) {
        super(props);
        CurrentActiveTab.currentActiveFooterTab = 'home';
    }

    _navigate(name,component, type = 'Normal') {
        this.props.navigator.push({
            component: component,
            name: name,
            passProps: {
                name: name
            },
            type: type
        })
    }

    render() {
        return (
            <Container theme={myTheme}>
                <Header>
                    <Title>课程</Title>
                </Header>
                <Content>
                    <Button block style={{marginTop:30}} onPress={()=>this._navigate('课程详情',CourseDetailView)}>我是课程</Button>
                </Content>
                <Footer>
                    <TabsFooter navigator={this.props.navigator} />
                </Footer>
            </Container>
        );
    }
}

同样的，在个人中心页面，我们需要把全局变量设为CurrentActiveTab.currentActiveFooterTab = 'person';

这样就可以实现Tab的切换了，TabActive样式我们可以通过自定义设置。