ReactNative學習筆記九之TabNavigator

mymdeep發表於2019-03-04
React筆記

之前寫過一個關於StackNavigator的文章，如果感興趣的同學可以翻一下我之前的文章（連結在文章末尾）。TabNavigator是我要介紹的關於react-navigation的第二個元件。

安裝以及相關問題

首先要想使用react-navigation，需要先進行安裝：

 npm install --save react-navigation複製程式碼

簡單示例

在這裡我先寫一個簡單的示例，下面會不斷的擴充套件介紹：

import React, { Component } from `react`;
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from `react-native`;
import Home from `./Home`
import { TabNavigator } from `react-navigation`;

import Second from `./Second`
const TestTab = TabNavigator({
    Home: { screen: Home },
    Second: { screen: Second },
});

AppRegistry.registerComponent(`TestTab`, () => TestTab);複製程式碼

Home和Second是我隨便寫的兩個簡單介面，這裡不再多說了。只需要一個
const TestTab = TabNavigator({
Home: { screen: Home },
Second: { screen: Second },
});
就可以實現一個TabNavigator：

option

看過我之前寫的StackNavigator的文章都知道，可以通過設定option改變Navigator的樣式。
現在試一下：

import React, { Component } from `react`;
import {
  AppRegistry,
  StyleSheet,
  Text,
    Image,
  View
} from `react-native`;
import Home from `./Home`
import { TabNavigator } from `react-navigation`;

import Second from `./Second`
const TestTab = TabNavigator({
    Home: { screen: Home,
        navigationOptions: {

            tabBarLabel: `第一個`,
            tabBarIcon: ({tintColor}) => (
                    <Image
                        source={require(`./images/home.png`)}
                        style={[{tintColor: tintColor},styles.icon]}
                    />
                ),

        }
},
    Second: { screen: Second,
        navigationOptions: {
            tabBarLabel: `第二個`,
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require(`./images/second.png`)}
                    style={[{tintColor: tintColor},styles.icon]}
                />
            ),

        }
    },


},
    {
        animationEnabled: true, // 切換頁面時是否有動畫效果
        tabBarPosition: `top`, // 顯示在底端，android 預設是顯示在頁面頂端的
        swipeEnabled: true, // 是否可以左右滑動切換tab
        backBehavior: `none`, // 按 back 鍵是否跳轉到第一個Tab(首頁)， none 為不跳轉
        tabBarOptions: {
            activeTintColor: `#ff8500`, // 文字和圖片選中顏色
            inactiveTintColor: `#999`, // 文字和圖片未選中顏色
            showIcon: true, // android 預設不顯示 icon, 需要設定為 true 才會顯示
            indicatorStyle: {
                height: 0  // 如TabBar下面顯示有一條線，可以設高度為0後隱藏
            },
            style: {
                backgroundColor: `#fff`, // TabBar 背景色
                // height: 44
            },
            labelStyle: {
                fontSize: 10, // 文字大小
            },
        },
    });
const styles = StyleSheet.create({
    icon: {
        width: 26,
        height: 26,
    },
});
AppRegistry.registerComponent(`TestTab`, () => TestTab);複製程式碼

具體配置屬性的含義，可以參照後面的註釋。

這裡要注意：之前的版本設定tabbar的標題和圖片用的是：tabBar: {
label: `xxx`,
icon: ({tintColor}) => (
<Image
source={require(`../images/xxx.png`)}
style={[{tintColor: tintColor},styles.icon]}
/>
),
},但是現在去用的就是tabBarLabel，這跟react-navigation的版本有關

效果如下：

屬性

除了上面提到的屬性，接下來介紹一下其他可能會用到的屬性。
標準的TabNavigator的建構函式有兩個引數：

TabNavigator(RouteConfigs, TabNavigatorConfig)複製程式碼

TabNavigatorConfig

  • tabBarComponent – tab bar的元件
  • tabBarPosition -bar的位置，是在上面還是在下面，上述demo都是在上面
  • swipeEnabled -是否支援左右滑動
  • animationEnabled – 是否有動畫
  • lazy – 懶載入
  • tabBarOptions這個看下面的詳解
  • initialRouteName – 第一次進入的介面
  • order – 介面順序
  • paths – 可以設定跳轉順序
  • backBehavior – 按 back 鍵是否跳轉到第一個Tab(首頁)， none 為不跳轉

tabBarOptions（TabBarBottom）

  • activeTintColor – 啟用版塊的顏色
  • activeBackgroundColor – 啟用版塊的背景顏色
  • inactiveTintColor – 非啟用版塊的顏色
  • inactiveBackgroundColor – 非啟用版塊的背景顏色
  • showLabel -是否顯示label
  • style – tab bar的style
  • labelStyle – label的style
  • tabStyle – tab的style

    tabBarOptions（TabBarTop）

  • activeTintColor – 啟用版塊的顏色
  • activeBackgroundColor – 啟用版塊的背景顏色
  • inactiveTintColor – 非啟用版塊的顏色
  • inactiveBackgroundColor – 非啟用版塊的背景顏色
  • showIcon – 是否顯示icon
  • showLabel -是否顯示label
    upperCaseLabel – label是否全部大寫，預設是true
    pressColor – 點選顏色 (Android >= 5.0 only)
    pressOpacity – 點選透明度(iOS and Android < 5.0 only)
    scrollEnabled – 是否使用scrollable
  • tabStyle – tab的style
  • indicatorStyle – 指示器style
  • labelStyle – label的style
  • iconStyle – icon的style
  • style – tab bar的style

    Screen Navigation Options

  • title 標題
  • tabBarVisible是否可見
  • tabBarLabel每一個tab的名稱
  • tabBarIcon 每一個tab的icon

總結

這是關於TabNavigator的所有介紹，關於上面介紹的引數，我也是翻譯的官網上的，之後還會介紹DrawerNavigator，但也許不是下一篇文章，需要的朋友也可以給我留言。

之前文章合集：
Android文章合集
iOS文章合集
ReactNative文章合集
如果你也做ReactNative開發，並對ReactNative感興趣，歡迎關注我的公眾號，加入我們的討論群：

相關文章