React Navigation--TabNavigator 详细的例子

发布时间：2020-12-15 05:10:55 所属栏目：百科来源：网络整理
导读：/** *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; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> StyleSheet,108); list-style-type:decimal-leading-zero; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> }from'react-native';
 
 import{
 TabNavigator,108); list-style-type:decimal-leading-zero; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; 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); list-style-type:decimal-leading-zero; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> };
 render(){
return(
 <Button
 onPress={()=>this.props.navigation.navigate('Notifications')}
 title="Gotonotifications"
 />
 );
 }
 }
classMyNotificationsScreen tabBarLabel:'Notifications',248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> tabBarIcon:({tintColor})=>(
 <Image
 source={require('./img/notif-icon.png')}
 style={[styles.icon,{tintColor:tintColor}]}
 ),248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> };
 render(){
return(
 <Button
 onPress={()=>this.props.navigation.goBack()}
 title="Gobackhome"
 );
conststyles=StyleSheet.create({
 icon:{
 width:26,108); list-style-type:decimal-leading-zero; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> height:26,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> },108); list-style-type:decimal-leading-zero; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> });
constSimpleTabNavigator=TabNavigator(
 {
 Home:{
 screen:MyHomeScreen,108); list-style-type:decimal-leading-zero; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> },248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> Notifications:{
 screen:MyNotificationsScreen,108); list-style-type:decimal-leading-zero; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> tabBarOptions:{
 activeTintColor:'#ff00ff',153); background-color:inherit; font-weight:bold">exportdefaultSimpleTabNavigator;
 
 
顶: 0
踩
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!