天天看点

antd源码分析之——标签页(tabs 2.Tabs关键组件功能实现)

由于ant Tabs组件结构较复杂,共分三部分叙述,本文为目录中第二部分(高亮)

目录

一、组件结构

antd代码结构

rc-ant代码结构

1、组件树状结构

2、Context使用说明

3、rc-tabs中只在example、test中使用的组件说明

二、Tabs关键组件功能实现

1、Tabs(antd)

2、RcTabs

3、Sentinel哨兵

4、InkTabBarNode

三、Tabs的滚动效果

ScrollableTabBarNode 

 antd中的Tabs主要控制可编辑态和Tabs额外的按钮,具体tab功能实现交给rc-Tabs,具体内容见下图

antd源码分析之——标签页(tabs 2.Tabs关键组件功能实现)

render方法源码对照

antd源码分析之——标签页(tabs 2.Tabs关键组件功能实现)
antd源码分析之——标签页(tabs 2.Tabs关键组件功能实现)
antd源码分析之——标签页(tabs 2.Tabs关键组件功能实现)

antd源码分析之——标签页(tabs 2.Tabs关键组件功能实现)

sentinel哨兵负责监听tab键盘事件,tab键focus焦点向后移动,shift+tab键焦点向前移动

前后关系如下图所示

antd源码分析之——标签页(tabs 2.Tabs关键组件功能实现)

 代码 

antd源码分析之——标签页(tabs 2.Tabs关键组件功能实现)

 inkTabBar为当前active状态tab下的蓝色高亮条,关键逻辑在于计算高亮条的高度和偏移量,详细代码及逻辑见下图注释

antd源码分析之——标签页(tabs 2.Tabs关键组件功能实现)

继续阅读