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. */
68. importReactfrom'react';
69. import{
70. Button,
71. ScrollView,
72. 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';
74. import{
75. TabNavigator,108);color:inherit;line-height:18px;list-style-position:outside !important;"> }from'react-navigation';
76. classMyHomeScreenextendsReact.Component{
77. staticnavigationOptions={
78. tabBarLabel:'Home',0);background-color:inherit;">//Note:BydefaulttheiconisonlyshownoniOS.SearchtheshowIconoptionbelow.
79. tabBarIcon:({tintColor})=>(
80. <Image
81. source={require('./img/notif-icon.png')}
82. style={[styles.icon,{tintColor:tintColor}]}
83. />
84. ),108);color:inherit;line-height:18px;list-style-position:outside !important;"> };
85. render(){
86. return(
87. <Button
88. onPress={()=>this.props.navigation.navigate('Notifications')}
89. title="Gotonotifications"
90. />
91. );
92. }
93. }
94. classMyNotificationsScreen tabBarLabel:'Notifications',248);line-height:18px;list-style-position:outside !important;"> tabBarIcon:({tintColor})=>(
95. <Image
96. source={require('./img/notif-icon.png')}
97. style={[styles.icon,{tintColor:tintColor}]}
98. ),248);line-height:18px;list-style-position:outside !important;"> };
99. render(){
100. return(
101. <Button
102. onPress={()=>this.props.navigation.goBack()}
103. title="Gobackhome"
104. );
105. conststyles=StyleSheet.create({
106. icon:{
107. 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;"> });
108. constSimpleTabNavigator=TabNavigator(
109. {
110. Home:{
111. screen:MyHomeScreen,108);color:inherit;line-height:18px;list-style-position:outside !important;"> },248);line-height:18px;list-style-position:outside !important;"> Notifications:{
112. screen:MyNotificationsScreen,108);color:inherit;line-height:18px;list-style-position:outside !important;"> tabBarOptions:{
113. activeTintColor:'#ff00ff',153);background-color:inherit;font-weight:bold;">exportdefaultSimpleTabNavigator;

顶

0

踩