React Navigation--TabNavigator 详细的例子

前端之家收集整理的这篇文章主要介绍了React Navigation--TabNavigator 详细的例子前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  1. /**
  2. *CreatedbyYiBingon2017/5/5.
  3. *本程序效果:类似Android中的ViewPager--有2个页面,可以随手势来回切换,也可以点击Tab切换。
  4. *APIDefinition--TabNavigator(RouteConfigs,TabNavigatorConfig)。
  5. *
  6. *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>)。
  7. *TabNavigatorConfig--
  8. *1.tabBarComponent-componenttouseasthetabbar,
  9. *e.g.TabBarBottom(thisisthedefaultoniOS),
  10. *TabBarTop(thisisthedefaultonAndroid)
  11. *2.tabBarPosition-positionofthetabbar,canbe'top'or'bottom'
  12. *3.swipeEnabled-whethertoallowswipingbetweentabs
  13. *4.animationEnabled-whethertoanimatewhenchangingtabs
  14. *5.lazy-whethertolazilyrendertabsasneededasopposedtorenderingthemupfront
  15. *6.tabBarOptions-configurethetabbar.
  16. *tabBarOptionsforTabBarBottom(defaulttabbaroniOS):
  17. *(1)activeTintColor-labelandiconcoloroftheactivetab
  18. *(2)activeBackgroundColor-backgroundcoloroftheactivetab
  19. *(3)inactiveTintColor-labelandiconcoloroftheinactivetab
  20. *(4)inactiveBackgroundColor-backgroundcoloroftheinactivetab
  21. *(5)showLabel-whethertoshowlabelfortab,defaultistrue
  22. *(6)style-styleobjectforthetabbar
  23. *(7)labelStyle-styleobjectforthetablabel
  24. *Example:
  25. *tabBarOptions:{
  26. *activeTintColor:'#e91e63',0);background-color:inherit;">*labelStyle:{
  27. *fontSize:12,0);background-color:inherit;">*},0);background-color:inherit;">*style:{
  28. *backgroundColor:'blue',0);background-color:inherit;">*}
  29. *tabBarOptionsforTabBarTop(defaulttabbaronAndroid):
  30. *(2)inactiveTintColor-labelandiconcoloroftheinactivetab
  31. *(3)showIcon-whethertoshowiconfortab,defaultisfalse
  32. *(4)showLabel-whethertoshowlabelfortab,defaultistrue
  33. *(5)upperCaseLabel-whethertomakelabeluppercase,0);background-color:inherit;">*(6)pressColor-colorformaterialripple(Android>=5.0only)
  34. *(7)pressOpacity-opacityforpressedtab(iOSandAndroid<5.0only)
  35. *(8)scrollEnabled-whethertoenablescrollabletabs
  36. *(9)tabStyle-styleobjectforthetab
  37. *(10)indicatorStyle-styleobjectforthetabindicator(lineatthebottomofthetab)
  38. *(11)labelStyle-styleobjectforthetablabel
  39. *(12)iconStyle-styleobjectforthetabicon
  40. *(13)style-styleobjectforthetabbar
  41. *labelStyle:{
  42. *style:{
  43. *}
  44. *7.initialRouteName-TherouteNamefortheinitialtabroutewhenfirstloading
  45. *8.order-ArrayofrouteNameswhichdefinestheorderofthetabs
  46. *9.paths-ProvideamappingofrouteNametopathconfig,whichoverridesthepathssetintherouteConfigs.
  47. *10.backBehavior-Shouldthebackbuttoncauseatabswitchtotheinitialtab?Ifyes,settoinitialRoute,0);background-color:inherit;">*otherwisenone.DefaultstoinitialRoutebehavior.
  48. *ScreenNavigationOptions--
  49. *1.title-GenerictitlethatcanbeusedasafallbackforheaderTitleandtabBarLabel
  50. *2.tabBarVisible-Trueorfalsetoshoworhidethetabbar,ifnotsetthendefaultstotrue
  51. *3.tabBarIcon-ReactElementorafunctionthatgiven{focused:boolean,tintColor:string}
  52. *returnsaReact.Element,todisplayintabbar
  53. *4.tabBarLabel-TitlestringofatabdisplayedinthetabbarorReactElementorafunctionthatgiven
  54. *{focused:boolean,tintColor:string}returnsaReact.Element,todisplayintabbar.
  55. *Whenundefined,scenetitleisused.Tohide,seetabBarOptions.showLabelintheprevIoUssection.
  56. *
  57. *NavigatorProps--
  58. *ThenavigatorcomponentcreatedbyTabNavigator(...)takesthefollowingprops:
  59. *1.screenProps-Passdownextraoptionstochildscreensandnavigationoptions,forexample:
  60. *constTabNav=TabNavigator({
  61. *//config
  62. *});
  63. *<TabNavscreenProps={
  64. *//thispropwillgetpassedtothescreencomponentsasthis.props.screenProps
  65. */>
  66. */
  67. importReactfrom'react';
  68. import{
  69. Button,
  70. ScrollView,
  71. 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';
  72. import{
  73. TabNavigator,108);color:inherit;line-height:18px;list-style-position:outside !important;"> }from'react-navigation';
  74. classMyHomeScreenextendsReact.Component{
  75. staticnavigationOptions={
  76. tabBarLabel:'Home',0);background-color:inherit;">//Note:BydefaulttheiconisonlyshownoniOS.SearchtheshowIconoptionbelow.
  77. tabBarIcon:({tintColor})=>(
  78. <Image
  79. source={require('./img/notif-icon.png')}
  80. style={[styles.icon,{tintColor:tintColor}]}
  81. />
  82. ),108);color:inherit;line-height:18px;list-style-position:outside !important;"> };
  83. render(){
  84. return(
  85. <Button
  86. onPress={()=>this.props.navigation.navigate('Notifications')}
  87. title="Gotonotifications"
  88. />
  89. );
  90. }
  91. }
  92. classMyNotificationsScreen tabBarLabel:'Notifications',248);line-height:18px;list-style-position:outside !important;"> tabBarIcon:({tintColor})=>(
  93. <Image
  94. source={require('./img/notif-icon.png')}
  95. style={[styles.icon,{tintColor:tintColor}]}
  96. ),248);line-height:18px;list-style-position:outside !important;"> };
  97. render(){
  98. return(
  99. <Button
  100. onPress={()=>this.props.navigation.goBack()}
  101. title="Gobackhome"
  102. );
  103. conststyles=StyleSheet.create({
  104. icon:{
  105. 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;"> });
  106. constSimpleTabNavigator=TabNavigator(
  107. {
  108. Home:{
  109. screen:MyHomeScreen,108);color:inherit;line-height:18px;list-style-position:outside !important;"> },248);line-height:18px;list-style-position:outside !important;"> Notifications:{
  110. screen:MyNotificationsScreen,108);color:inherit;line-height:18px;list-style-position:outside !important;"> tabBarOptions:{
  111. activeTintColor:'#ff00ff',153);background-color:inherit;font-weight:bold;">exportdefaultSimpleTabNavigator;





0
原文链接:https://www.f2er.com/react/303322.html

猜你在找的React相关文章