ReactNative进阶（二十七）：createMaterialTopTabNavigator顶部导航组件

API原型

createMaterialTopTabNavigator(RouteConfigs,TabNavigatorConfig)

  

 

  
1
 

参数说明

RouteConfigs

路由名称到路由配置的一个映射。示例如下：

{
	Home:{ //这是一个首页路由配置项
		screen:Home,//必填项   Home是react的一个组件
		path:'',//选填项深度连接或webAPP中起作用
		navigationOptions:{//选填项 //配置项...
		}
	}
	Detail:{ //这是一个详情页路由配置项
		screen:Detail,//必填项   Detail是react的一个组件
		path:'',//选填项深度连接或webAPP中起作用
		navigationOptions:{//选填项 //配置项...
		}
	}
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
 

navigationOptions配置项参数

• title：tabBarLabel中的文字;
• swipeEnabled：Boolean 是否可以滑动切换tab页面，如果不设置则使用TabNavigatorConfig中的swipeEnabled选项一般在TabNavigatorConfig中设置;
• tabBarOnPress：Object 点击tab的回调方法该方法接收两个参数 ;
  （1）navigation（this.props.navigation中的值）;
  （2）defaultHandler（tab press 的默认 handler）;

TabNavigatorConfig

• initialRouteName：tab页面打开的时候显示的tab页面;
• order：由RouteConfigs的key组成的数组，按照该数组的顺序显示对应的tab页面;
• backBehavior：在tab页面按手机返回键的动作。值为initialRoute的时候返回到initialRouteName页面；值为none时返回上一页面或退出程序。默认为initialRoute;
• tabBarPosition：tab bar的位置 top或bottom；默认top;
• swipeEnabled：Boolean左右滑动屏幕的时候是否切换tab，默认true;
• animationEnabled：切换tab页面的时候是否显示动画;
• lazy：Boolean 打开tab页面的时候是否开启懒加载，默认false，渲染全部的tab页面；当为true的时候只有进入tab页面是才渲染对应的tab页面;
• optimizationsEnabled：是否将tab页面用 <ResourceSavingScene /> 包裹。如果为true在tab页面失去焦点的时候会移除当前页面提高内存使用率;
• initialLayout：object包含width和height可以防止tab view渲染的延迟;
• tabBarComponent：值为一个组件，用来覆盖tab bar;
• tabBarOptions：object，具体属性参数信息如下。

tabBarOptions属性

创建示例如下：

//TopNavigatorComponent.js
import {createAppContainer, createMaterialTopTabNavigator} from 'react-navigation'
import TopPage1 from './TopPage1'
import TopPage2 from './TopPage2'
import TopPage3 from './TopPage3'
import TopPage4 from './TopPage4'
/**
 * 标签导航
 */
const TopTabNavigator = createMaterialTopTabNavigator({ topPage1: { screen: TopPage1, }, topPage2: { screen: TopPage2, }, topPage3: { screen: TopPage3, }, topPage4:{ screen:TopPage4, }
}, { tabBarPosition: 'bottom', //标签栏在屏幕顶部还是底部 // swipeEnabled:true, //是否可以滑动切换标签 // backBehavior:'none', //andorid按下返回键将返回initalRouteName，如果设置非initalRouteName则直接结束标签导航 lazy: false, //是否只渲染显示的标签 animationEnabled: true, //标签切换是否有动画效果 tabBarOptions: { activeTintColor: '#ffffff',  //标签栏激活字体颜色 inactiveTintColor: '#000000',//标签栏未激活字体颜色 showLabel: true, //是否显示标签栏 labelStyle: {fontSize: 16},  //标签样式(可设置字体大小等) showIcon: true, //是否显示标签栏上图标 scrollEnabled: true, //是否可以滚动标签栏目(当tab总数超过一屏) indicatorStyle: {height: 1}, //指示器样式 height：0则不显示 style: {backgroundColor: '#31b3c0'}, //设置整个tabbar样式(背景颜色等) // tabStyle:{backgroundColor:'#ffffff', height:50},//设置单个tabbar样式 }
});
 
const appTopTabNavigation = createAppContainer(TopTabNavigator);
export default appTopTabNavigation;

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
 

拓展阅读

• 官网

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/116975295