React-Native进阶_4.底部标签栏TabBar

原生项目中，我们对底部Tab 很熟悉，点击Tab标签可以切换页面，那么在React-Native 中我们该怎么实现呢。

在查了文档后，我们找到了一个TabBarIos ，这个是ios 下使用的Tab 标签，但是没有找到Android 可以使用的，因此 我们需要自己实现，或者使用第三方的，这里，刚接触React不太会自己实现，因此使用github上开源的react-native-tab-navigator，来实现切换的功能。

使用步骤：

安装

Make sure that you are in your React Native project directory and run:

npm install react-native-tab-navigator --save

使用

Import TabNavigator as a JavaScript module:

import TabNavigator from 'react-native-tab-navigator';

This is an example of how to use the component and some of the commonly used props that it supports:

<TabNavigator>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'home'}
    title="Home"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    badgeText="1"
    onPress={() => this.setState({ selectedTab: 'home' })}>
    {homeView}
  </TabNavigator.Item>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'profile'}
    title="Profile"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'profile' })}>
    {profileView}
  </TabNavigator.Item>
</TabNavigator>

See TabNavigatorItem's supported props for more info.

/**
 * tabbar  demo
 */

'use strict'
import TabNavigator from 'react-native-tab-navigator'
import React, {Component} from 'react';
import styles from '../Styles/Main';
import MovieList from './MovieList';
import {
    View,
    Image,
}from 'react-native';
import USBox from "./USBox";
const TAB_NORMAL_1=require('../Images/bottom_bar_01.png');
const TAB_PRESS_1 =require('../Images/bottom_bar_01_selected.png');
const TAB_NORMAL_2=require('../Images/bottom_bar_02.png');
const TAB_PRESS_2=require('../Images/bottom_bar_02_selected.png');
export default class TabBarComponent extends Component{

    constructor(props) {
        super(props);
        this.state={
            selectedTab:'home',
        }
    }
        render(){
            return(
                <View  style={styles.Container}>

                    <TabNavigator>
                        <TabNavigator.Item
                            selected={this.state.selectedTab === 'home'}
                            title="Home"
                            renderIcon={() => <Image source={TAB_NORMAL_1} style ={styles.icon} />}
                            renderSelectedIcon={() => <Image source={TAB_PRESS_1}style ={styles.icon}  />}
                            badgeText="1"
                            onPress={() => this.setState({ selectedTab: 'home' })}>
                            <MovieList />
                        </TabNavigator.Item>
                        <TabNavigator.Item
                            selected={this.state.selectedTab === 'profile'}
                            title="Profile"
                            renderIcon={() => <Image source={TAB_NORMAL_2} style ={styles.icon} />}
                            renderSelectedIcon={() => <Image source={TAB_PRESS_2} style ={styles.icon} />}

                            onPress={() => this.setState({ selectedTab: 'profile' })}>
                            <USBox />
                        </TabNavigator.Item>
                    </TabNavigator>
                </View>
            );
    }
}

实现Tab切换功能的代码就是 return 中的TabNavigator ,这里我添加了两个Tab标签。

标签构建基本介绍：

selected: bool型，是否选中状态，可使用setState进行控制，默认false
title: 标题，String类型，非必填
renderIcon: 必填项，即图标，但为function类型，所以这里需要用到Arrow Function
renderSelectedIcon: 选中状态的图标，非必填，也是function类型
onPress: function型，即点击事件的回调函数，这里需要控制的是state，而切换页面已经由控件本身帮我们实现好了

ps：记得在构造方法中指定默认选中标签： selectedTab。

指定两个Tab 切换要展示的页面  <MovieList />和 <USBox />。

实现效果：

源码下载

-----------------------------期待大神们的到来

------------------------一---起分享，一起进步！需要你们