『React Navigation 3x系列教程』createBottomTabNavigator開發指南
期待已久的新教程上線啦!解鎖React Native開發新姿勢,一網打盡React Native最新與最熱技術,點我Get!!!
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:覆蓋<SafeAreaView>的forceInset prop,預設是{ bottom: 'always', top: 'never' },可選值:top | bottom | left | right ('always' | 'never');
eg:
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={{color: tintColor}}
/>
),
}
},
Page2: {
screen: Page2,
navigationOptions: {
tabBarLabel: 'Page2',
tabBarIcon: ({tintColor, focused}) => (
<Ionicons
name={focused ? 'ios-people' : 'ios-people-outline'}
size={26}
style={{color: tintColor}}
/>
),
}
},
Page3: {
screen: Page3,
navigationOptions: {
tabBarLabel: 'Page3',
tabBarIcon: ({tintColor, focused}) => (
<Ionicons
name={focused ? 'ios-chatboxes' : 'ios-chatboxes-outline'}
size={26}
style={{color: tintColor}}
/>
),
}
},
}, {
tabBarComponent: TabBarComponent,
tabBarOptions: {
activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
}
});
第二步:配置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="跳轉到頁面2"
onPress={() => {
navigation.navigate("Page3",{ name: 'Devio' })
}}
/>
<Button
title="Go Back"
onPress={() => {
navigation.goBack();
}}
/>
程式碼解析:
頁面跳轉可分為兩步:
-
- 獲取navigation:
const {navigation} = this.props;
-
- 通過
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={{flex: 1, backgroundColor: "gray",}}>
<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的時候;
- 初始化傳參:如何在設定頁面的時候傳遞引數呢?
類似上述的應用場景有很多,大家可以通過與本教程配套的最新版React Native+Redux打造高質量上線App視訊教程進行進一步學習react-navigation的更多高階應用。
- 大家在學習使用React Navigation3x過程中遇到任何問題都可以在React Navigation3x的視訊教程中尋找答案哈。
- 另外,也可以通過最新版React Native+Redux打造高質量上線App視訊教程學習React Navigation3x開發的更多實戰經驗和技巧,以及優化思路。
相關文章
- 『React Navigation 3x系列教程』之React Navigation 3x開發指南ReactNavigation
- 『React Navigation 3x系列教程』createMaterialTopTabNavigator開發指南ReactNavigation
- 『React Navigation 3x系列教程』createDrawerNavigator開發指南ReactNavigation
- 『React Navigation 3x系列教程』之createStackNavigator開發指南ReactNavigation
- 『React Navigation 3x系列教程』之createBotReactNavigation
- react系列教程React
- 從navigator到react-navigation進階教程ReactNavigation
- react開發教程(七)React事件系統React事件
- C#微信公眾號開發系列教程二(新手接入指南)C#
- React 教程:快速上手指南React
- Exploit開發系列教程-Heap
- Exploit開發系列教程-Windbg
- 微信開發系列教程(二)
- 硬體開發系列教程
- React Native——react-navigation的使用React NativeNavigation
- React 技術棧系列教程React
- C#微信開發系列教程C#
- react-navigation 使用錦囊ReactNavigation
- react-navigation圖文攻略ReactNavigation
- [譯] React Hook 介紹 — React 系列教程 Part 1ReactHook
- React Navigation 的個人分析與融合ReactNavigation
- react navigation實現透明彈窗ReactNavigation
- react-navigation的超級大坑ReactNavigation
- 自定義react-navigation的TabBarReactNavigationtabBar
- react-navigation路由篇之StackRouterReactNavigation路由
- 微信程式開發系列教程(一)開發環境搭建開發環境
- React Native+Redux開發實用教程React NativeRedux
- React Native iOS混合開發實戰教程React NativeiOS
- React Native 速成 005 — React Navigation 之 Tab NavigatorReact NativeNavigation
- Exploit開發系列教程-Mona 2& SEH
- 微信小程式開發–視訊教程系列微信小程式
- HTML5原生WebGL開發系列教程HTMLWeb
- React Native Android混合開發實戰教程React NativeAndroid
- 最全面的Navigation的使用指南Navigation
- javacv教程文件手冊開發指南匯總篇Java
- 前端系列——React開發必不可少的eslint配置前端ReactEsLint
- Flutter開發系列教程之網路請求Flutter
- odoo 開發入門教程系列-繼承(Inheritance)Odoo繼承