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

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

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

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题

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

{
	Home:{ //这是一个首页路由配置项
		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属性

创建示例如下：

//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: {


### 最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

*   技术要深入到什么程度？

*   做久了技术总要转型管理？

*   我能做什么，我想做什么？

*   **一技之长，就是深耕你的专业技能，你的专业技术。**（重点）

*   独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

*   拥有事业，选择一份使命，带领团队实现它。（创业）

**一技之长分五个层次**

*   栈内技术 - 是指你的前端专业领域技术

*   栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

*   工程经验 - 是建设专业技术体系的“解决方案”

*   带人做事 - 是对团队协作能力的要求

*   业界发声 - 工作经验总结对外分享，与他人交流



> 永远不要放弃一技之长，它值得你长期`信仰持有`。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

> 主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

![](https://img-blog.csdnimg.cn/img_convert/44bc3d1e2743a7cf1e94e28026aedf8d.png)