原生專案中，我們對底部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>
            );
    }
}

標籤構建基本介紹：

selected: bool型，是否選中狀態，可使用setState進行控制，預設false
title: 標題，String型別，非必填
renderIcon: 必填項，即圖示，但為function型別，所以這裡需要用到Arrow Function
renderSelectedIcon: 選中狀態的圖示，非必填，也是function型別
onPress: function型，即點選事件的回撥函式，這裡需要控制的是state，而切換頁面已經由控制元件本身幫我們實現好了

ps：記得在構造方法中指定預設選中標籤： selectedTab。

指定兩個Tab 切換要展示的頁面  <MovieList />和 <USBox />。

實現效果：

原始碼下載

---------------歡迎各位大神加群

----------------Android交流群：230274309

-----------------------------期待大神們的到來

------------------------一---起分享，一起進步！需要你們