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

2401_84447233

于 2024-05-16 01:23:01 发布

阅读量655

点赞数 23

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84447233/article/details/138930764

版权

程序员专栏收录该内容

149 篇文章 0 订阅

订阅专栏

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

HTML5有哪些新特性？
Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?
如何实现浏览器内多个标签页之间的通信？
⾏内元素有哪些？块级元素有哪些？空(void)元素有那些？⾏内元素和块级元素有什么区别？
简述⼀下src与href的区别？
cookies,sessionStorage,localStorage 的区别？
HTML5 的离线储存的使用和原理？
怎样处理移动端 1px 被渲染成 2px 问题？
iframe 的优缺点？
Canvas 和 SVG 图形的区别是什么？

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

问：0.1 + 0.2 === 0.3 嘛？为什么？
JS 数据类型
写代码：实现函数能够深度克隆基本类型
事件流
事件是如何实现的？
new 一个函数发生了什么
什么是作用域？
JS 隐式转换，显示转换
了解 this 嘛，bind，call，apply 具体指什么
手写 bind、apply、call
setTimeout(fn, 0)多久才执行，Event Loop
手写题：Promise 原理
说一下原型链和原型链的继承吧
数组能够调用的函数有那些？
PWA使用过吗？serviceWorker的使用原理是啥？
ES6 之前使用 prototype 实现继承
箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？
事件循环机制（Event Loop）

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

}


##### 2.1.1 navigationOptions配置项参数



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


#### 2.2 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，具体属性参数信息如下。
> 
> 
> 


##### 2.2.1 tabBarOptions属性


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210518091854954.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ==,size_16,color_FFFFFF,t_70)  
 创建示例如下：

//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样式