react-navigation 之 TabNavigator
上文已經說過StackNavigator,這篇文章說說TabNavigator管怠，TabNavigator 與 StackNavigator 用法類似 語法相似
TabNavigator平臺差異
Android IOS 默認顯示效果不一樣倒槐， Android tab默認在Top而IOS 默認在Buttom 不過我們可以設置參數改變這些默認效果
const Presets = {
iOSBottomTabs: {
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: false,
lazy: false,
},
AndroidTopTabs: {
tabBarComponent: TabBarTop,
tabBarPosition: 'top',
swipeEnabled: true,
animationEnabled: true,
lazy: false,
},
};
參數說明
export default (
routeConfigMap: NavigationRouteConfigMap,
stackConfig: StackNavigatorConfig = {}
)
TabNavigator = (
routeConfigs: NavigationRouteConfigMap, //和StackNacigator 一樣
config: TabNavigatorConfig = {}
)
export type NavigationRouteConfigMap = {
[routeName: string]: NavigationRouteConfig<*>,
};
routeConfigs （第一個參數）
都是基于
NavigationRouteConfigMap但不同點在于 navigationOptions 里面的參數不一致
上文已經說過了StackNavigator 這里就不累述了
在 navigationOptions 中 tabBar*系列都是設置TabNavigator的
titletabBarLabeltabBarIcontabBarVisible
export type NavigationScreenOptions = {
title?: string,
};
export type NavigationTabScreenOptions = NavigationScreenOptions & {
tabBarIcon?:
| React.Element<*>
| ((options: { tintColor: ?string, focused: boolean }) => ?React.Element<
*
>),
tabBarLabel?:
| string
| React.Element<*>
| ((options: { tintColor: ?string, focused: boolean }) => ?React.Element<
*
>),
tabBarVisible?: boolean,
};
export type TabViewConfig = {
tabBarComponent?: ReactClass<*>,
tabBarPosition?: 'top' | 'bottom',
tabBarOptions?: {},
swipeEnabled?: boolean,
animationEnabled?: boolean,
lazy?: boolean,
};
通過上面源碼可以知道:
-
title是一個string類型的 會同時設置StackNavigator的title(當全局沒有設置title屬性時) -
tabBarLabel是既可以是string又可以是function(tintColor: ?string, focused: boolean) -
tabBarIcon是既可以是string又可以是function(tintColor: ?string, focused: boolean) -
tabBarVisibleboolean 類型 是否顯示tabbar 默認顯示
TabNavigatorConfig （第二個參數）
直接上源碼
export type TabNavigatorConfig = {
containerOptions?: void,
} & NavigationTabRouterConfig &
TabViewConfig;
export type NavigationTabRouterConfig = {
initialRouteName?: string,
paths?: NavigationPathsConfig,
navigationOptions?: NavigationScreenConfig<NavigationTabScreenOptions>,
//以下是TabBar特有的
order?: Array<string>, // todo: type these as the real route names rather than 'string'
// Does the back button cause the router to switch to the initial tab
backBehavior?: 'none' | 'initialRoute', // defaults `initialRoute`
export type TabViewConfig = {
tabBarComponent?: ReactClass<*>,
tabBarPosition?: 'top' | 'bottom',
tabBarOptions?: {},
swipeEnabled?: boolean,
animationEnabled?: boolean,
lazy?: boolean,
};
};
{
-
initialRouteName設置默認的頁面組件 pathsnavigationOptionsorder-
backBehavior按 back 鍵是否跳轉到第一個Tab(首頁)换吧， none 為不跳轉 -
tabBarPosition設置tabbar的位置寞焙，iOS默認在底部起趾，安卓默認在頂部班巩。（屬性值：'top'查近，'bottom'） -
swipeEnabled是否允許在標簽之間進行滑動锨咙。 -
animationEnabled是否在更改標簽時顯示動畫语卤。 lazy-
tabBarOptions配置標簽欄的一些屬性
}
由以上源碼可知
與StackNavigator 區(qū)別多了 order , backBehavior,tabBarPosition,swipeEnabled,animationEnabled,lazy,backBehavior 還有 navigationOptions,tabBarOptions 的區(qū)別
tabBarOptions 配置標簽欄的一些屬性
ios TabBarBottom.js
type DefaultProps = {
activeTintColor: string, // label和icon的前景色 活躍狀態(tài)下（選中）。
activeBackgroundColor: string, //：label和icon的背景色 活躍狀態(tài)下（選中） 蓖租。
inactiveTintColor: string, //label和icon的前景色 不活躍狀態(tài)下(未選中)粱侣。
inactiveBackgroundColor: string, //label和icon的背景色 不活躍狀態(tài)下（未選中）。
showLabel: boolean, // 是否顯示label蓖宦，默認開啟齐婴。
};
type Props = {
activeTintColor: string, // label和icon的前景色 活躍狀態(tài)下（選中）。
activeBackgroundColor: string, //：label和icon的背景色 活躍狀態(tài)下（選中） 稠茂。
inactiveTintColor: string, //label和icon的前景色 不活躍狀態(tài)下(未選中)柠偶。
inactiveBackgroundColor: string, //label和icon的背景色 不活躍狀態(tài)下（未選中）。
position: Animated.Value,
navigation: NavigationScreenProp<NavigationState, NavigationAction>,
jumpToIndex: (index: number) => void,
getLabel: (scene: TabScene) => ?(React.Element<*> | string),
renderIcon: (scene: TabScene) => React.Element<*>,
showLabel: boolean, // 是否顯示label睬关，默認開啟诱担。
style?: Style, //tabbar的樣式。
labelStyle?: Style, //label的樣式电爹。
showIcon: boolean, //是否顯示圖標蔫仙，默認關閉。
};
android TabBarTop.js
type DefaultProps = {
activeTintColor: string, //label和icon的前景色 活躍狀態(tài)下（選中） 丐箩。
inactiveTintColor: string, //label和icon的前景色 不活躍狀態(tài)下(未選中)摇邦。
showIcon: boolean, //是否顯示圖標，默認關閉屎勘。
showLabel: boolean, // 是否顯示label施籍，默認開啟。
upperCaseLabel: boolean, //是否使標簽大寫概漱，默認為true丑慎。
};
indicatorStyle：標簽指示器的樣式對象（選項卡底部的行）。安卓底部會多出一條線，可以將height設置為0來暫時解決這個問題竿裂。
type Props = {
activeTintColor: string,//label和icon的前景色 活躍狀態(tài)下（選中） 玉吁。
inactiveTintColor: string, //label和icon的前景色 不活躍狀態(tài)下(未選中)。
showIcon: boolean, //是否顯示圖標铛绰，默認關閉诈茧。
showLabel: boolean, // 是否顯示label，默認開啟捂掰。
upperCaseLabel: boolean, //是否使標簽大寫敢会，默認為true。
position: Animated.Value,
navigation: NavigationScreenProp<NavigationState, NavigationAction>,
getLabel: (scene: TabScene) => ?(React.Element<*> | string),
renderIcon: (scene: TabScene) => React.Element<*>,
labelStyle?: Style, //label的樣式这嚣。
iconStyle?: Style, //圖標的樣式鸥昏。
};
android 默認的 iconStyle 和 labelStyle
icon: {
height: 24,
width: 24,
},
label: {
textAlign: 'center',
fontSize: 13,
margin: 8,
backgroundColor: 'transparent',
},
ios 默認的 iconStyle 和 labelStyle
icon: {
flexGrow: 1,
},
label: {
textAlign: 'center',
fontSize: 10,
marginBottom: 1.5,
backgroundColor: 'transparent',
},
上述可知 Android 特有的屬性 ： indicatorStyle,iconStyle,upperCaseLabel
