React Native頂|底部導航使用小技巧

導航一直是App開發中比較重要的一個組件，ReactNative提供了兩種導航組件供我們使用，分別是：NavigatorIOS和Navigator，但是前者只能用於iOS平台，后者在ReactNative0.44版本以后已經被移除了。

好在有人提供了更好的導航組件，就是我們今天要講的react-navigation，並且ReactNative官方更推薦我們使用此組件。

 

本篇文章只講解基礎用法，如果你想了解更多，請戳這里->戳我。

 簡介

react-navigation主要包括導航，底部tab，頂部tab，側滑等，分別為：

• 導航 -> StackNavigator
• 底部或者頂部tab -> TabNavigator
• 側滑 -> DrawerNavigator

我們今天主要講TabNavigator。

 效果展示

 實現代碼

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Button,
    Text,
    View,
    Image,
    StatusBar
} from 'react-native';
import { StackNavigator, TabBarBottom, TabNavigator } from "react-navigation";


class Home extends React.Component {
    static navigationOptions = {
        tabBarLabel: '熱點',
        tabBarIcon: ({ focused, tintColor }) => (
            <Image
                source={focused ? require('../res/images/hot_hover.png') : require('../res/images/hot.png')}
                style={{ width: 26, height: 26, tintColor: tintColor }}
            />
        )
    };
    render() {
        return (
            <View style={styles.container}>
                <Text>！這是熱點</Text>
            </View>
        );
    }
}

class Circle extends React.Component {
    static navigationOptions = {
        tabBarLabel: '圈子',
        tabBarIcon: ({ focused, tintColor }) => (
            <Image
                source={focused ? require('../res/images/coterie.png') : require('../res/images/coterie.png')}
                style={{ width: 26, height: 26, tintColor: tintColor }}
            />
        )
    };
    render() {
        return (
            <View style={styles.container}>
                <Text>！這是圈子</Text>
            </View>
        );
    }
}

class Tools extends React.Component {
    static navigationOptions = {
        tabBarLabel: '工具',
        tabBarIcon: ({ focused, tintColor }) => (
            <Image
                source={focused ? require('../res/images/tool.png') : require('../res/images/tool.png')}
                style={{ width: 26, height: 26, tintColor: tintColor }}
            />
        )
    };
    render() {
        return (
            <View style={styles.container}>
                <Text>！這是工具</Text>
            </View>
        );
    }
}

class Mypage extends React.Component {
    static navigationOptions = {
        tabBarLabel: '我的',
        tabBarIcon: ({ focused, tintColor }) => (
            <Image
                source={focused ? require('../res/images/my_hover.png') : require('../res/images/my.png')}
                style={{ width: 26, height: 26, tintColor: tintColor }}
            />
        )
    };
    render() {
        return (
            <View style={styles.container}>
                <Text>！這是我的</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    }
});


const MyApp = TabNavigator(
    {
        Home: {
            screen: Home,
        },
        Circle: {
            screen: Circle,
        },
        Tools: {
            screen: Tools,
        },
        Mypage: {
            screen: Mypage,
        },
    },
    {
        tabBarOptions: {
            activeTintColor: '#4BC1D2',
            inactiveTintColor: '#000',
            showIcon: true,
            showLabel: true,
            upperCaseLabel: false,
            pressColor: '#823453',
            pressOpacity: 0.8,
            style: {
                backgroundColor: '#fff',
                paddingBottom: 0,
                borderTopWidth: 0.5,
                borderTopColor: '#ccc',
            },
            labelStyle: {
                fontSize: 12,
                margin: 1
            },
            indicatorStyle: { height: 0 }, //android 中TabBar下面會顯示一條線，高度設為 0 后就不顯示線了
        },
        tabBarPosition: 'bottom',
        swipeEnabled: false,
        animationEnabled: false,
        lazy: true,
        backBehavior: 'none',
    });

module.exports = MyApp;

 配置說明

NavigationOptions
當然，通過NavigationOptions來配置我們的tabBarItem:
title - 標題
tabBarVisible - 是否可見
tabBarIcon - 配置圖片，當然，完全可以不使用圖片
tabBarLabel - 也是配置標題，只不過title既能配置tab的標題，也能配置navigation的標題

 

TabNavigatorConfig
tabBarComponent- 用作標簽欄的組件，例如 （這是iOS上的默認設置）， （這是Android上的默認設置）TabBarBottomTabBarTop
tabBarPosition- 標簽欄的位置可以是或'top''bottom'
swipeEnabled - 是否允許在標簽之間進行滑動
animationEnabled - 是否在更改標簽時動畫
lazy - 是否根據需要懶惰呈現標簽，而不是提前制作
tabBarOptions - 配置標簽欄，如下所示。
幾個選項被傳遞到底層路由器來修改導航邏輯：
initialRouteName - 首次加載時初始標簽路由的routeName
order - 定義選項卡順序的routeNames數組
paths - 將routeName映射到路徑配置，該配置將覆蓋routeConfigs中設置的路徑。
backBehavior - 后退按鈕是否會使Tab鍵切換到初始選項卡？如果是，否則設置。默認為行為。initialRoutenoneinitialRoute

tabBarOptions for （iOS上的默認標簽欄）TabBarBottom
activeTintColor - 活動標簽的標簽和圖標顏色
activeBackgroundColor - 活動選項卡的背景顏色
inactiveTintColor - 非活動標簽的標簽和圖標顏色
inactiveBackgroundColor - 非活動標簽的背景顏色
showLabel - 是否顯示標簽的標簽，默認為true
style - 標簽欄的樣式對象
labelStyle - 標簽標簽的樣式對象
tabStyle - 標簽的樣式對象

tabBarOptions for （Android上的默認標簽欄）TabBarTop
activeTintColor - 活動標簽的標簽和圖標顏色
inactiveTintColor - 非活動標簽的標簽和圖標顏色
showIcon - 是否顯示標簽的圖標，默認值為false
showLabel - 是否顯示標簽的標簽，默認為true
upperCaseLabel - 是否使標簽大寫，默認為true
pressColor - 材質波紋顏色（Android> = 5.0）
pressOpacity - 按壓標簽的不透明度（iOS和Android <5.0 only）
scrollEnabled - 是否啟用可滾動選項卡
tabStyle - 標簽的樣式對象
indicatorStyle - 標簽指示器的樣式對象（選項卡底部的行）
labelStyle - 標簽標簽的樣式對象
iconStyle - 標簽圖標的樣式對象
style - 標簽欄的樣式對象

 

小技巧

1.去掉安卓下的下划線，設置：tabBarOptions => indicatorStyle:{ height: 0 }；

2.底部導航在導航最上方添加一條分割線，設置：tabBarOptions => style => borderTopWidth: 0.5, borderTopColor: '#ccc'；

3.導航安卓圖標和文字間隙比較大，手動調整小設置：tabBarOptions => labelStyle => margin: 0；