這篇文章將向大家分享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 頁巢狀在到 中。如果是,一旦該 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
第一步:建立一個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' })
}}
/>
複製程式碼
程式碼解析:
頁面跳轉可分為兩步:
-
- 獲取navigation:
const {navigation} = this.props; 複製程式碼
-
- 通過
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的更多高階應用。
- 大家在學習使用React Navigation3x過程中遇到任何問題都可以在React Navigation3x的視訊教程中尋找答案哈。
- 另外,也可以通過最新版React Native+Redux打造高質量上線App視訊教程學習React Navigation開發的更多實戰經驗和技巧,以及優化思路。