React Navigation 3x系列教程』createMaterialTopTabNavigator開發指南

這篇文章將向大家分享createMaterialTopTabNavigator的一些開發指南和實用技巧。

createMaterialTopTabNavigator API

createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig):

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

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

RouteConfigs

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

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

TabNavigatorConfig

  • tabBarComponent：指定TabNavigator的TabBar組件；
  • tabBarPosition: 用于指定TabBar的顯示位置，支持'top' 與 'bottom'兩種方式；
  • swipeEnabled : 是否可以左右滑動切換tab；
  • lazy - 默認值是 false。如果是true，Tab 頁只會在被選中或滑動到該頁時被渲染。當為 false 時，所有的 Tab 頁都將直接被渲染；（可以輕松實現多Tab 頁面的懶加載）；
  • optimizationsEnabled -是否將 Tab 頁嵌套在到 <ResourceSavingScene /> 中。如果是，一旦該 Tab 頁失去焦點，將被移出當前頁面, 從而提高內存使用率。
  • animationEnabled : 切換頁面時是否有動畫效果。
  • initialLayout : 包含初始高度和寬度的可選對象可以被傳遞以防止react-native-tab-view呈現中的一個幀延遲；
  • tabBarOptions: 配置TaBar下文會詳細講解；
  • initialRouteName : 默認頁面組件，TabNavigator顯示的第一個頁面；
  • 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標簽是否支持縮放，默認支持；
  • pressColor -Color for material ripple（僅支持 Android >= 5.0；
  • pressOpacity -按下標簽時的不透明度（支持 iOS 和 Android < 5.0）；
  • scrollEnabled -是否支持 選項卡滾動

eg:

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

navigationOptions（屏幕導航選項）

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

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

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

createBottomTabNavigator

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

export const MaterialTopTabNavigator = createMaterialTopTabNavigator({//在這里配置頁面的路由
        Page1: {
            screen: Page1,
            navigationOptions: {
                tabBarLabel: 'Page10',
                tabBarIcon: ({tintColor, focused}) => (
                    <Ionicons
                        name={'ios-home'}
                        size={26}
                        style={{color: tintColor}}
                    />
                ),
            }
        },
        Page4: {
            screen: Page4,
            navigationOptions: {
                tabBarLabel: 'Page2',
                tabBarIcon: ({tintColor, focused}) => (
                    <Ionicons
                        name={'ios-people'}
                        size={26}
                        style={{color: tintColor}}
                    />
                ),
            }
        },
        Page3: {
            screen: Page3,
            navigationOptions: {
                tabBarLabel: 'Page3',
                tabBarIcon: ({tintColor, focused}) => (
                    <Ionicons
                        name={'ios-chatboxes'}
                        size={26}
                        style={{color: tintColor}}
                    />
                ),
            }
        },
    },
    {
        tabBarOptions: {
            tabStyle: {
                minWidth: 50
            },
            upperCaseLabel: false,//是否使標簽大寫，默認為true
            scrollEnabled: true,//是否支持 選項卡滾動，默認false
            // activeTintColor: 'white',//label和icon的前景色 活躍狀態下（選中）
            // inactiveTintColor: 'gray',//label和icon的前景色 活躍狀態下（未選中）
            style: {
                backgroundColor: '#678',//TabBar 的背景顏色
            },
            indicatorStyle: {
                height: 2,
                backgroundColor: 'white',
            },//標簽指示器的樣式
            labelStyle: {
                fontSize: 13,
                marginTop: 6,
                marginBottom: 6,
            },//文字的樣式
        },
    }
)

第二步：配置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={{color: tintColor}}
            />
        ),
    }
},

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

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

第三步：界面跳轉

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

代碼解析：

頁面跳轉可分為兩步：

    1. 獲取navigation：
    const {navigation} = this.props;
    1. 通過navigate(routeName, params, action)進行頁面跳轉：
     navigation.navigate('Page2');
 navigation.navigate('Page3',{ name: 'Devio' });

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

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

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

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

類似上述的應用場景有很多，大家可以通過與本教程配套的最新版React Native+Redux打造高質量上線App視頻教程進行進一步學習react-navigation的更多高級應用。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。