第三章 React-Native react-navigation之createMaterialTopTabNavigator和createBottomTabNavigator

3-1 一個小demo展示

這部分代碼在git@github.com:fx35792/react_native_study.git的createBottomTopNavigator分支上
因為需要用到圖標所以我們要使用一個第三方庫react-native-vector-ions

yarn add react-native-vector-icons

react-native link react-native-vector-icons

//navigators/AppNavigators.js

import React from 'react';
import {createStackNavigator, createBottomTabNavigator, createMaterialTopTabNavigator} from 'react-navigation';
import {Button, Platform} from 'react-native';
import Login from '../pages/Login';
import HomePage from '../pages/HomePage';
import Page1 from '../pages/Page1';
import Page2 from '../pages/Page2';
import Page3 from '../pages/Page3';
import Page4 from '../pages/Page4';
import Page5 from '../pages/Page5';

import Ionicons from 'react-native-vector-icons/Ionicons'

//設(shè)置頭部導(dǎo)航
const AppMaterialTopTabNavigator = createMaterialTopTabNavigator({
    Page1: {
        screen: Page1,
        navigationOptions: {
            tabBarLabel: 'All'
        }
    },
    Page2: {
        screen: Page2,
        navigationOptions: {
            tabBarLabel: 'IOS'
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: {
            tabBarLabel: 'React'
        }
    },
    Page4: {
        screen: Page4,
        navigationOptions: {
            tabBarLabel: 'React Native'
        }
    },
    Page5: {
        screen: Page5,
        navigationOptions: {
            tabBarLabel: 'Android'
        }
    }
}, {
    tabBarOptions: {
        tabStyle: {
            mindWidth: 50,
        },
        upperCaseLabel: false,//是否使標簽大寫，默認true
        scrollEnabled: true,//是否支持選項卡滑動，默認false
        style: {
            backgroundColor: '#678' //tabBar 背景色
        },
        indicatorStyle: {
            height: 2,
            backgroundColor: 'white'
        },//標簽指示器的樣式
        labelStyle: {
            fontSize: 13,
            marginTop: 6,
            marginBottom: 6
        }//文字的樣式
    }
});


//設(shè)置底部導(dǎo)航
const AppBottomTabNavigator = createBottomTabNavigator({
    Page1: {
        screen: Page1,
        navigationOptions: {
            tabBarLabel: '最熱',
            tabBarIcon: ({titleColor, focused}) => (
                <Ionicons
                    name={'ios-home'}
                    size={26}
                    style={{color: titleColor}}
                />
            )
        }
    },
    Page2: {
        screen: Page2,
        navigationOptions: {
            tabBarLabel: '推薦',
            tabBarIcon: ({titleColor, focused}) => (
                <Ionicons
                    name={'ios-aperture'}
                    size={26}
                    style={{color: titleColor}}
                />
            )
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: {
            tabBarLabel: '趨勢',
            tabBarIcon: ({titleColor, focused}) => (
                <Ionicons
                    name={'ios-people'}
                    size={26}
                    style={{color: titleColor}}
                />
            )
        }
    },
    Page4: {
        screen: Page4,
        navigationOptions: {
            tabBarLabel: '我',
            tabBarIcon: ({titleColor, focused}) => (
                <Ionicons
                    name={'ios-person'}
                    size={26}
                    style={{color: titleColor}}
                />
            )
        }
    }
}, {
    tabBarOptions: {
        activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff'
    }
});


export const AppStackNavigator = createStackNavigator({
    HomePage: {
        screen: HomePage
    },
    Page1: {
        screen: Page1,
        navigationOptions: ({navigation}) => ({
            title: `${navigation.state.params.name}頁面名`
        })
    },
    Page2: {
        screen: Page2,
        navigationOptions: {
            title: 'This is Page2'
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: (props) => {
            const {navigation} = props;
            const {state, setParams} = navigation;
            const {params} = state;
            return {
                title: params.title ? params.title : 'This is Page3',
                headerRight: (
                    <Button
                        title={params.mode === 'edit' ? '保存' : '編輯'}
                        onPress={() =>
                            setParams({
                                mode: params.mode === 'edit' ? '' : 'edit'
                            })
                        }
                    />
                )
            }
        }
    },
    Page4: {
        screen: Page4,
        navigationOptions: {
            title: 'This is Page4'
        }
    },
    Page5: {
        screen: Page5,
        navigationOptions: {
            title: 'This is Page5'
        }
    },
    Login: {
        screen: Login,
        navigationOptions: {
            title: 'This is Login'
        }
    },
    Bottom: {
        screen: AppBottomTabNavigator,
        navigationOptions: {
            title: 'This is Bottom'
        }
    },
    Top: {
        screen: AppMaterialTopTabNavigator,
        navigationOptions: {
            title: 'This is Top'
        }
    }
});

//pages/HomePage.js

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

type Props = {};
export default class HomePage extends Component<Props> {
    static navigationOptions = {
        title: 'Home',
        headerBackTitle: '返回哈哈'//設(shè)置返回此頁面的返回按鈕文案，長度有限制
    };

    render() {
        const {navigation} = this.props;
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Welcome to HomePage!</Text>
                <Button
                    title={'Go to Page1'}
                    onPress={() => {
                        navigation.navigate('Page1', {
                            name: '動態(tài)的'
                        })
                    }}
                />
                <Button
                    title={'Go to Page2'}
                    onPress={() => {
                        navigation.navigate('Page2')
                    }}
                />
                <Button
                    title={'Go to Page3'}
                    onPress={() => {
                        navigation.navigate('Page3', {
                            name: 'Dell'
                        })
                    }}
                />
                <Button
                    title={'Go to Bottom'}
                    onPress={() => {
                        navigation.navigate('Bottom')
                    }}
                />
                <Button
                    title={'Go to Top'}
                    onPress={() => {
                        navigation.navigate('Top')
                    }}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    }
});

3-2 createMaterialTopTabNavigator相關(guān)的Api

createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig):

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

從createMaterialTopTabNavigator API上可以看出createMaterialTopTabNavigator支持通過RouteConfigs和 TabNavigatorConfig兩個參數(shù)來創(chuàng)建createMaterialTopTabNavigator導(dǎo)航器。

RouteConfigs

RouteConfigs支持三個參數(shù)screen、path以及navigationOptions；

  • screen(必選)：指定一個 React 組件作為屏幕的主要顯示內(nèi)容，當這個組件被TabNavigator加載時，它會被分配一個navigation prop。
  • path(可選)：用來設(shè)置支持schema跳轉(zhuǎn)時使用，具體使用會在下文的有關(guān)Schema章節(jié)中講到；
  • navigationOptions(可選)：用以配置全局的屏幕導(dǎo)航選項如：title、headerRight、headerLeft等；
TabNavigatorConfig
  • tabBarComponent：指定TabNavigator的TabBar組件；
  • tabBarPosition: 用于指定TabBar的顯示位置，支持’top’ 與 ‘bottom’兩種方式；
  • swipeEnabled : 是否可以左右滑動切換tab；
  • lazy - 默認值是 false。如果是true，Tab 頁只會在被選中或滑動到該頁時被渲染。當為 false 時，所有的 Tab 頁都將直接被渲染；（可以輕松實現(xiàn)多Tab 頁面的懶加載）；
  • optimizationsEnabled -是否將 Tab 頁嵌套在到 <resourcesavingscene style="box-sizing: border-box;"></resourcesavingscene>中。如果是，一旦該 Tab 頁失去焦點，將被移出當前頁面, 從而提高內(nèi)存使用率。
  • animationEnabled : 切換頁面時是否有動畫效果。
  • initialLayout : 包含初始高度和寬度的可選對象可以被傳遞以防止react-native-tab-view呈現(xiàn)中的一個幀延遲；
  • tabBarOptions: 配置TaBar下文會詳細講解；
  • initialRouteName : 默認頁面組件，TabNavigator顯示的第一個頁面；
  • order: 定義tab順序的routeNames數(shù)組。
  • paths: 提供routeName到path config的映射，它覆蓋routeConfigs中設(shè)置的路徑。
  • backBehavior: 后退按鈕是否會導(dǎo)致標簽切換到初始tab？ 如果是，則設(shè)切換到初始tab，否則什么也不做。 默認為切換到初始tab。
tabBarOptions（tab配置）
  • activeTintColor: 設(shè)置TabBar選中狀態(tài)下的標簽和圖標的顏色；
  • inactiveTintColor: 設(shè)置TabBar非選中狀態(tài)下的標簽和圖標的顏色；
  • showIcon: 是否展示圖標，默認是false；
  • showLabel: 是否展示標簽，默認是true；
  • upperCaseLabel - 是否使標簽大寫，默認為true。
  • tabStyle: 設(shè)置單個tab的樣式；
  • indicatorStyle: 設(shè)置 indicator(tab下面的那條線)的樣式；
  • labelStyle: 設(shè)置TabBar標簽的樣式；
  • iconStyle: 設(shè)置圖標的樣式；
  • style: 設(shè)置整個TabBar的樣式；
  • allowFontScaling: 設(shè)置TabBar標簽是否支持縮放，默認支持；
  • pressColor -Color for material ripple（僅支持 Android >= 5.0；
  • pressOpacity -按下標簽時的不透明度（支持 iOS 和 Android < 5.0）；
  • scrollEnabled -是否支持 選項卡滾動
navigationOptions（屏幕導(dǎo)航選項）

createMaterialTopTabNavigator支持的屏幕導(dǎo)航選項的參數(shù)有：

  • title: 可以用作headerTitle和tabBarLabel的備選的通用標題。
  • swipeEnabled：是否允許tab之間的滑動切換，默認允許；
  • tabBarIcon: 設(shè)置TabBar的圖標；
  • tabBarLabel: 設(shè)置TabBar的標簽；
  • tabBarOnPress: Tab被點擊的回調(diào)函數(shù)，它的參數(shù)是一保函一下變量的對象：
  • navigation：頁面的 navigation props
  • defaultHandler: tab press 的默認 handler
  • tabBarAccessibilityLabel：選項卡按鈕的輔助功能標簽。 當用戶點擊標簽時，屏幕閱讀器會讀取這些信息。 如果您沒有選項卡的標簽，建議設(shè)置此項；
  • tabBarTestID：用于在測試中找到該選項卡按鈕的 ID；

3-3 createBottomTabNavigator相關(guān)的Api

createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig):

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

從createBottomTabNavigator API上可以看出createBottomTabNavigator支持通過RouteConfigs和 BottomTabNavigatorConfig兩個參數(shù)來創(chuàng)建createBottomTabNavigator導(dǎo)航器。

RouteConfigs

RouteConfigs支持三個參數(shù)screen、path以及navigationOptions；

  • screen(必選)：指定一個 React 組件作為屏幕的主要顯示內(nèi)容，當這個組件被TabNavigator加載時，它會被分配一個navigation prop。
  • path(可選)：用來設(shè)置支持schema跳轉(zhuǎn)時使用，具體使用會在下文的有關(guān)Schema章節(jié)中講到；
  • navigationOptions(可選)：用以配置全局的屏幕導(dǎo)航選項如：title、headerRight、headerLeft等；
BottomTabNavigatorConfig
  • tabBarComponent：指定createBottomTabNavigator的TabBar組件，如果不指定在iOS上默認使用TabBarBottom，在Android平臺上默認使用TabBarTop。
    • TabBarBottom與TabBarTop都是react-navigation所支持的組件，要自定義TabBar可以重寫這兩個組件也可以根據(jù)需要自己實現(xiàn)一個；
  • tabBarOptions: 配置TaBar下文會詳細講解；
  • initialRouteName : 默認頁面組件，createBottomTabNavigator顯示的第一個頁面；
  • order: 定義tab順序的routeNames數(shù)組。
  • paths: 提供routeName到path config的映射，它覆蓋routeConfigs中設(shè)置的路徑。
  • backBehavior: 后退按鈕是否會導(dǎo)致標簽切換到初始tab？ 如果是，則設(shè)切換到初始tab，否則什么也不做。 默認為切換到初始tab。

tabBarOptions（tab配置）

  • activeTintColor: 設(shè)置TabBar選中狀態(tài)下的標簽和圖標的顏色；
  • inactiveTintColor: 設(shè)置TabBar非選中狀態(tài)下的標簽和圖標的顏色；
  • showIcon: 是否展示圖標，默認是false；
  • showLabel: 是否展示標簽，默認是true；
  • upperCaseLabel - 是否使標簽大寫，默認為true。
  • tabStyle: 設(shè)置單個tab的樣式；
  • indicatorStyle: 設(shè)置 indicator(tab下面的那條線)的樣式；
  • labelStyle: 設(shè)置TabBar標簽的樣式；
  • iconStyle: 設(shè)置圖標的樣式；
  • style: 設(shè)置整個TabBar的樣式；
  • allowFontScaling: 設(shè)置TabBar標簽是否支持縮放，默認支持；
  • safeAreaInset：覆蓋<safeareaview style="box-sizing: border-box;">的forceInset prop，默認是{ bottom: 'always', top: 'never' }，可選值：top | bottom | left | right ('always' | 'never')；</safeareaview>
navigationOptions（屏幕導(dǎo)航選項）

createBottomTabNavigator支持的屏幕導(dǎo)航選項的參數(shù)有：

  • title: 可以用作headerTitle和tabBarLabel的備選的通用標題。
  • tabBarVisible: 顯示或隱藏TabBar，默認顯示；
  • tabBarIcon: 設(shè)置TabBar的圖標；
  • tabBarLabel: 設(shè)置TabBar的標簽；
  • tabBarOnPress: Tab被點擊的回調(diào)函數(shù)，它的參數(shù)是一保函一下變量的對象：
  • navigation: navigation prop ；
  • defaultHandler: tab按下的默認處理程序；
  • tabBarButtonComponent：React組件，它包裝圖標和標簽并實現(xiàn)onPress。 默認情況下是TouchableWithoutFeedback的一個封裝，使其其表現(xiàn)與其它可點擊組件相同，tabBarButtonComponent: TouchableOpacity 將使用 TouchableOpacity 來替代；
  • tabBarAccessibilityLabel：選項卡按鈕的輔助功能標簽。 當用戶點擊標簽時，屏幕閱讀器會讀取這些信息。 如果您沒有選項卡的標簽，建議設(shè)置此項；
  • tabBarTestID：用于在測試中找到該選項卡按鈕的 ID；
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容