- /**
- *CreatedbyYiBingon2017/5/5.
- *本程序效果:类似Android中的ViewPager--有2个页面,可以随手势来回切换,也可以点击Tab切换。
- *APIDefinition--TabNavigator(RouteConfigs,TabNavigatorConfig)。
- *
- *RouteConfigs--和StackNavigator的RouteConfigs一样,可以看上一篇文章(ReactNavigation--StackNavigator详细的例子<atarget="_blank"href="http://blog.csdn.net/yibing2011/article/details/71195316">http://blog.csdn.net/yibing2011/article/details/71195316</a>)。
- *TabNavigatorConfig--
- *1.tabBarComponent-componenttouseasthetabbar,
- *e.g.TabBarBottom(thisisthedefaultoniOS),
- *TabBarTop(thisisthedefaultonAndroid)
- *2.tabBarPosition-positionofthetabbar,canbe'top'or'bottom'
- *3.swipeEnabled-whethertoallowswipingbetweentabs
- *4.animationEnabled-whethertoanimatewhenchangingtabs
- *5.lazy-whethertolazilyrendertabsasneededasopposedtorenderingthemupfront
- *6.tabBarOptions-configurethetabbar.
- *tabBarOptionsforTabBarBottom(defaulttabbaroniOS):
- *(1)activeTintColor-labelandiconcoloroftheactivetab
- *(2)activeBackgroundColor-backgroundcoloroftheactivetab
- *(3)inactiveTintColor-labelandiconcoloroftheinactivetab
- *(4)inactiveBackgroundColor-backgroundcoloroftheinactivetab
- *(5)showLabel-whethertoshowlabelfortab,defaultistrue
- *(6)style-styleobjectforthetabbar
- *(7)labelStyle-styleobjectforthetablabel
- *Example:
- *tabBarOptions:{
- *activeTintColor:'#e91e63',0);background-color:inherit;">*labelStyle:{
- *fontSize:12,0);background-color:inherit;">*},0);background-color:inherit;">*style:{
- *backgroundColor:'blue',0);background-color:inherit;">*}
- *tabBarOptionsforTabBarTop(defaulttabbaronAndroid):
- *(2)inactiveTintColor-labelandiconcoloroftheinactivetab
- *(3)showIcon-whethertoshowiconfortab,defaultisfalse
- *(4)showLabel-whethertoshowlabelfortab,defaultistrue
- *(5)upperCaseLabel-whethertomakelabeluppercase,0);background-color:inherit;">*(6)pressColor-colorformaterialripple(Android>=5.0only)
- *(7)pressOpacity-opacityforpressedtab(iOSandAndroid<5.0only)
- *(8)scrollEnabled-whethertoenablescrollabletabs
- *(9)tabStyle-styleobjectforthetab
- *(10)indicatorStyle-styleobjectforthetabindicator(lineatthebottomofthetab)
- *(11)labelStyle-styleobjectforthetablabel
- *(12)iconStyle-styleobjectforthetabicon
- *(13)style-styleobjectforthetabbar
- *labelStyle:{
- *style:{
- *}
- *7.initialRouteName-TherouteNamefortheinitialtabroutewhenfirstloading
- *8.order-ArrayofrouteNameswhichdefinestheorderofthetabs
- *9.paths-ProvideamappingofrouteNametopathconfig,whichoverridesthepathssetintherouteConfigs.
- *10.backBehavior-Shouldthebackbuttoncauseatabswitchtotheinitialtab?Ifyes,settoinitialRoute,0);background-color:inherit;">*otherwisenone.DefaultstoinitialRoutebehavior.
- *ScreenNavigationOptions--
- *1.title-GenerictitlethatcanbeusedasafallbackforheaderTitleandtabBarLabel
- *2.tabBarVisible-Trueorfalsetoshoworhidethetabbar,ifnotsetthendefaultstotrue
- *3.tabBarIcon-ReactElementorafunctionthatgiven{focused:boolean,tintColor:string}
- *returnsaReact.Element,todisplayintabbar
- *4.tabBarLabel-TitlestringofatabdisplayedinthetabbarorReactElementorafunctionthatgiven
- *{focused:boolean,tintColor:string}returnsaReact.Element,todisplayintabbar.
- *Whenundefined,scenetitleisused.Tohide,seetabBarOptions.showLabelintheprevIoUssection.
- *
- *NavigatorProps--
- *ThenavigatorcomponentcreatedbyTabNavigator(...)takesthefollowingprops:
- *1.screenProps-Passdownextraoptionstochildscreensandnavigationoptions,forexample:
- *constTabNav=TabNavigator({
- *//config
- *});
- *<TabNavscreenProps={
- *//thispropwillgetpassedtothescreencomponentsasthis.props.screenProps
- */>
- */
- importReactfrom'react';
- import{
- Button,
- ScrollView,
- Text,248);line-height:18px;list-style-position:outside !important;"> StyleSheet,108);color:inherit;line-height:18px;list-style-position:outside !important;"> }from'react-native';
- import{
- TabNavigator,108);color:inherit;line-height:18px;list-style-position:outside !important;"> }from'react-navigation';
- classMyHomeScreenextendsReact.Component{
- staticnavigationOptions={
- tabBarLabel:'Home',0);background-color:inherit;">//Note:BydefaulttheiconisonlyshownoniOS.SearchtheshowIconoptionbelow.
- tabBarIcon:({tintColor})=>(
- <Image
- source={require('./img/notif-icon.png')}
- style={[styles.icon,{tintColor:tintColor}]}
- />
- ),108);color:inherit;line-height:18px;list-style-position:outside !important;"> };
- render(){
- return(
- <Button
- onPress={()=>this.props.navigation.navigate('Notifications')}
- title="Gotonotifications"
- />
- );
- }
- }
- classMyNotificationsScreen tabBarLabel:'Notifications',248);line-height:18px;list-style-position:outside !important;"> tabBarIcon:({tintColor})=>(
- <Image
- source={require('./img/notif-icon.png')}
- style={[styles.icon,{tintColor:tintColor}]}
- ),248);line-height:18px;list-style-position:outside !important;"> };
- render(){
- return(
- <Button
- onPress={()=>this.props.navigation.goBack()}
- title="Gobackhome"
- );
- conststyles=StyleSheet.create({
- icon:{
- width:26,108);color:inherit;line-height:18px;list-style-position:outside !important;"> height:26,248);line-height:18px;list-style-position:outside !important;"> },108);color:inherit;line-height:18px;list-style-position:outside !important;"> });
- constSimpleTabNavigator=TabNavigator(
- {
- Home:{
- screen:MyHomeScreen,108);color:inherit;line-height:18px;list-style-position:outside !important;"> },248);line-height:18px;list-style-position:outside !important;"> Notifications:{
- screen:MyNotificationsScreen,108);color:inherit;line-height:18px;list-style-position:outside !important;"> tabBarOptions:{
- activeTintColor:'#ff00ff',153);background-color:inherit;font-weight:bold;">exportdefaultSimpleTabNavigator;
- 顶
- 0
-
踩