此部落格基於react-native-0.49.3

上一篇介紹了一下react-navigation依賴庫中的StackNavigator 這篇文章就接著上一篇繼續往下說也就是依賴庫中的第二個導航欄TabNavigator相當於Android中的TabLayout

TabNavigator：

效果圖：

使用的第一步當然是下載react-navigation這個依賴庫了

• 既然使用的是第三方庫，如果在你專案的node_modules資料夾中沒有react-navigation那麼你需要執行如下命令

//進入你專案的根目錄下執行
npm install --
 
save react-navigation

由於react-native-0.49.3這個版本直接將index.android.js和index.ios.js這兩個入口檔案直接合併為了一個index.js檔案並建立一了一個App.js檔案，那我們現在就只需要來修改我們這個檔案就可以達到我們的效果了。

直接配置導航欄

import React, {Component} from 'react';

import {
    Image,
} from 'react-native';

//引入react-navigation依賴庫
import {
    TabNavigator,
} from 'react-navigation'
 
;

//展示的頁面
import Home from './src/Home';
import Type from './src/Type';
import ShopCar from './src/ShopCar';
import Mine from './src/Mine';

//Tab
export default Tab = TabNavigator({
    //每一個頁面的配置
    Home: {
        screen: Home,
        navigationOptions: {
            tabBarLabel: '首頁',
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require
 
('./images/ic_home.png')}
                    style={[{height: 24, width: 24}, {tintColor: tintColor}]}
                />
            ),
        },
    },
    Type: {
        screen: Type,
        navigationOptions: {
            tabBarLabel: '分類',
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require('./images/ic_type.png')}
                    style={[{height: 24, width: 24}, {tintColor: tintColor}]}/>
            ),
        }
    },
    ShopCar: {
        screen: ShopCar,
        navigationOptions: {
            tabBarLabel: '購物車',
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require('./images/ic_shop_car.png')}
                    style={[{height: 24, width: 24}, {tintColor: tintColor}]}/>
            ),
        }
    },
    Mine: {
        screen: Mine,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require('./images/ic_me.png')}
                    style={[{height: 24, width: 24}, {tintColor: tintColor}]}/>
            ),
        }
    },

}, {
    //設定TabNavigator的位置
    tabBarPosition: 'bottom',
    //是否在更改標籤時顯示動畫
    animationEnabled: true,
    //是否允許在標籤之間進行滑動
    swipeEnabled: true,
    //按 back 鍵是否跳轉到第一個Tab(首頁)， none 為不跳轉
    backBehavior: "none",
    //設定Tab標籤的屬性

    tabBarOptions: {
        //Android屬性
        upperCaseLabel: false,//是否使標籤大寫，預設為true
        //共有屬性
        showIcon: true,//是否顯示圖示，預設關閉
        showLabel: true,//是否顯示label，預設開啟
        activeTintColor: '#EB3695',//label和icon的前景色 活躍狀態下（選中）
        inactiveTintColor: 'gray',//label和icon的前景色 活躍狀態下（未選中）
        style: { //TabNavigator 的背景顏色
            backgroundColor: 'white',
            height: 55,
        },
        indicatorStyle: {//標籤指示器的樣式物件（選項卡底部的行）。安卓底部會多出一條線，可以將height設定為0來暫時解決這個問題
            height: 0,
        },
        labelStyle: {//文字的樣式
            fontSize: 13,
            marginTop: -5,
            marginBottom: 5,
        },
        iconStyle: {//圖示的樣式
            marginBottom: 5,
        }
    },
});

• 解釋一下上面的程式碼

//每一個頁面的配置
Home: {
    screen: Home,//當前選項卡載入的頁面
    //配置每一個選項卡的樣式
    navigationOptions: {
        tabBarLabel: '首頁',//顯示的標籤文字
        //顯示的圖片
        tabBarIcon: ({tintColor}) => (
            <Image
                source={require('./images/ic_home.png')}
                style={[{height: 24, width: 24}, {tintColor: tintColor}]}
            />
        ),
    },
},

• 後半部分則是配置整個TabNavigator的樣式了；重要的東西都在上面標好了註釋認真閱讀哦！
• 更多的屬性介紹詳見文章頂部給出的官網地址

接下來就是編寫那四個頁面的佈局了，都是一樣的改幾個字就好了。

• Home.js

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

export default class Home extends Component {

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.button} activeOpacity={0.5}>
                    <Text style={{color: 'white'}}>首頁</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    button: {
        width: 120,
        height: 45,
        borderRadius: 5,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#4398ff',
    }
});

這篇文章到這就over了，TabNavigator使用起來還是很簡單的。接下來就可以寫一個將 StackNavigator 、 TabNavigator結合起來使用的Demo了。

將StackNavigator和TabNavigator結合使用案例下載地址

將StackNavigator、DrawerNavigator和TabNavigator結合使用案例下載地址

推薦閱讀：