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感興趣，歡迎關注我的公眾號，加入我們的討論群：

相關文章