ReactNative进阶(二十七):createMaterialTopTabNavigator顶部导航组件
【摘要】
文章目录
API原型参数说明RouteConfigsnavigationOptions配置项参数 TabNavigatorConfigtabBarOptions属性 拓展阅读
API原型
createMaterialTopTabNavigator(RouteConfigs,TabNavigatorConfig)
1
参数说明
RouteCo...
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
拓展阅读
文章来源: blog.csdn.net,作者:No Silver Bullet,版权归原作者所有,如需转载,请联系作者。
原文链接:blog.csdn.net/sunhuaqiang1/article/details/116975295
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)