createBottomTabNavigator

createBottomTabNavigator

createBottomTabNavigator相當於iOS裏面的TabBarController，屏幕下方的標籤欄。如圖：

createBottomTabNavigator API

createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig):

• RouteConfigs(必選)：路由配置對象是從路由名稱到路由配置的映射，告訴導航器該路由呈現什麼。
• BottomTabNavigatorConfig(可選)：配置導航器的路由(如：默認首屏，navigationOptions，paths等)樣式(如，轉場模式mode、頭部模式等)。

從createBottomTabNavigator API上可以看出createBottomTabNavigator支持通過RouteConfigs和 BottomTabNavigatorConfig兩個參數來創建createBottomTabNavigator導航器。

RouteConfigs

RouteConfigs支持三個參數screen、path以及navigationOptions；

• screen(必選)：指定一個 React 組件作爲屏幕的主要顯示內容，當這個組件被TabNavigator加載時，它會被分配一個navigation prop。
• path(可選)：用來設置支持schema跳轉時使用，具體使用會在下文的有關Schema章節中講到；
• navigationOptions(可選)：用以配置全局的屏幕導航選項如：title、headerRight、headerLeft等；

BottomTabNavigatorConfig

• tabBarComponent：指定createBottomTabNavigator的TabBar組件，如果不指定在iOS上默認使用TabBarBottom，在Android平臺上默認使用TabBarTop

  • TabBarBottom與TabBarTop都是react-navigation所支持的組件，要自定義TabBar可以重寫這兩個組件也可以根據需要自己實現一個；

• tabBarOptions: 配置TaBar下文會詳細講解；

• initialRouteName : 默認頁面組件，createBottomTabNavigator顯示的第一個頁面；

• order: 定義tab順序的routeNames數組。

• paths: 提供routeName到path config的映射，它覆蓋routeConfigs中設置的路徑。

• backBehavior: 後退按鈕是否會導致標籤切換到初始tab？ 如果是，則設切換到初始tab，否則什麼也不做。 默認爲切換到初始tab。

tabBarOptions（tab配置）

• activeTintColor: 設置TabBar選中狀態下的標籤和圖標的顏色；
• inactiveTintColor: 設置TabBar非選中狀態下的標籤和圖標的顏色；
• showIcon: 是否展示圖標，默認是false；
• showLabel: 是否展示標籤，默認是true；
• upperCaseLabel - 是否使標籤大寫，默認爲true。
• tabStyle: 設置單個tab的樣式；
• indicatorStyle: 設置 indicator(tab下面的那條線)的樣式；
• labelStyle: 設置TabBar標籤的樣式；
• iconStyle: 設置圖標的樣式；
• style: 設置整個TabBar的樣式；
• allowFontScaling: 設置TabBar標籤是否支持縮放，默認支持；
• safeAreaInset：覆蓋的forceInset prop，默認是{ bottom: 'always', top: 'never' }，可選值：top | bottom | left | right ('always' | 'never')；

tabBarOptions: {
  labelStyle: {
    fontSize: 12,
  },
  tabStyle: {
    width: 100,
  },
  style: {
    backgroundColor: 'blue',
  },
}

navigationOptions（屏幕導航選項）

createBottomTabNavigator支持的屏幕導航選項的參數有：

• title: 可以用作headerTitle和tabBarLabel的備選的通用標題。

• tabBarVisible: 顯示或隱藏TabBar，默認顯示；

• tabBarIcon: 設置TabBar的圖標；

• tabBarLabel: 設置TabBar的標籤；

• tabBarOnPress: Tab被點擊的回調函數，它的參數是一保函一下變量的對象：

  • navigation: navigation prop ；
  • defaultHandler: tab按下的默認處理程序；

• tabBarButtonComponent：React組件，它包裝圖標和標籤並實現onPress。 默認情況下是TouchableWithoutFeedback的一個封裝，使其其表現與其它可點擊組件相同，tabBarButtonComponent: TouchableOpacity 將使用 TouchableOpacity 來替代；

• tabBarAccessibilityLabel：選項卡按鈕的輔助功能標籤。 當用戶點擊標籤時，屏幕閱讀器會讀取這些信息。 如果您沒有選項卡的標籤，建議設置此項；

• tabBarTestID：用於在測試中找到該選項卡按鈕的 ID；

【案例1】使用createBottomTabNavigator做界面導航、配置navigationOptions

第一步：創建一個createBottomTabNavigator類型的導航器

export const AppTabNavigator = createBottomTabNavigator({
    Page1: {
        screen: Page1,
        navigationOptions: {
            tabBarLabel: 'Page1',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-home' : 'ios-home-outline'}
                    size={26}
                    style=
                />
            ),
        }
    },
    Page2: {
        screen: Page2,
        navigationOptions: {
            tabBarLabel: 'Page2',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-people' : 'ios-people-outline'}
                    size={26}
                    style=
                />
            ),
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: {
            tabBarLabel: 'Page3',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-chatboxes' : 'ios-chatboxes-outline'}
                    size={26}
                    style=
                />
            ),
        }
    },
}, {
    tabBarComponent: TabBarComponent,
    tabBarOptions: {
        activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
    }
});

提示：和本文配套的還有一個React Navigation3x的視頻教程，歡迎學習。

第二步：配置navigationOptions：

TabNavigator的navigationOptions有兩個關鍵的屬性，tabBarLabel標籤與tabBarIcon圖標：

Page2: {
    screen: Page2,
    navigationOptions: {
        tabBarLabel: 'Page2',
        tabBarIcon: ({tintColor, focused}) => (
            <Ionicons
                name={focused ? 'ios-people' : 'ios-people-outline'}
                size={26}
                style=
            />
        ),
    }
},

在上述代碼中使用了react-native-vector-icons的矢量圖標作爲Tab的顯示圖標，tabBarIcon接收一個React 組件，大家可以根據需要進行定製：

• tintColor: 當前狀態下Tab的顏色；
• focused: Tab是否被選中；

第三步：界面跳轉

 const {navigation} = this.props;
 ...
 <Button
    title="跳轉到頁面2"
    onPress={() => {
        navigation.navigate("Page3",{ name: 'Devio' })
    }}
/>
 <Button
    title="Go Back"
    onPress={() => {
        navigation.goBack();
    }}
/>

頁面跳轉可分爲兩步：

• 1. 獲取navigation：

    const {navigation} = this.props;
  

• 1. 通過navigate(routeName, params, action)進行頁面跳轉：

     navigation.navigate('Page2');
     navigation.navigate('Page3',{ name: 'Devio' });
  

  這裏在跳轉到Page3的時候傳遞了參數{ name: 'Devio' }；

第四步：更新頁面Params與返回

export default class Page1 extends React.Component {
    //也可在這裏定義每個頁面的導航屬性，這裏的定義會覆蓋掉別處的定義
    // static navigationOptions = {
    //     title: 'Page1',
    // };

    render() {
        const {navigation} = this.props;
        return <View style=>
            <Text style={styles.text}>歡迎來到Page1</Text>
            <Button
                title="Go Back"
                onPress={() => {
                    navigation.goBack();
                }}
            />
            <Button
                title="改變主題色"
                onPress={() => {
                    navigation.setParams({theme:{
                        tintColor:'orange',
                        updateTime:new Date().getTime()
                    }})
                }}
            />
            <Button
                title="跳轉到頁面2"
                onPress={() => {
                    navigation.navigate("Page2")
                }}
            />
        </View>
    }
}

代碼解析：

在上述代碼中通過：

<Button
    title="改變主題色"
    onPress={() => {
        navigation.setParams({theme:{
            tintColor:'orange',
            updateTime:new Date().getTime()
        }})
    }}
/>

更新當前主題，你會看到當點擊“改變主題色“按鈕時，TabBar的顏色也會跟着改變。

當用戶單擊Go Back按鈕時，通過：

navigation.goBack();

實現了返回到默認的Tab。

【高級案例】react-navigation的高級應用

在使用react-navigation時往往有些需求通過簡單的配置是無法完成的，比如：

• 動態配置createBottomTabNavigator：官方只提供了TabNavigator中的頁面的靜態配置方式，如果TabNavigator中的頁面不固定，需要動態生成那麼需要怎麼做呢？
• 動態配置createBottomTabNavigator的樣式：通過官方的文檔是無法實現動態改變TabNavigator的樣式的，比如：修改顯示的文字，修改字體顏色，修改圖標等等；
• 多層嵌套後路由個性化定製：createBottomTabNavigator被包裹後在TabNavigator中的頁面是無法藉助navigation跳轉到外層StackNavigator中的頁面的，這種應用場景很多，尤其是你需要定製TabNavigator的時候；