React Navigation--TabNavigator 详细的例子

发布时间：2020-12-15 06:56:53 所属栏目：百科来源：网络整理

导读：/** *CreatedbyYiBingon2017/5/5. *本程序效果：类似Android中的ViewPager--有2个页面，可以随手势来回切换，也可以点击Tab切换。 *APIDefinition--TabNavigator(RouteConfigs,TabNavigatorConfig)。 * *RouteConfigs--和StackNavigator的RouteConfigs一样，

 
    /**
 *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

踩

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!