react-app-tabs

react-app-tabs 是一个面向移动端交互场景的 Tabs 内核。

它不是一套视觉组件库，而是一套“手势行为层”：你可以完全自定义 TabBar 和面板内容，但仍然获得稳定、可预期的多层滑动交互。

在线示例

https://plutocrown.github.io/react-app-tabs/

推荐移动端访问

这个项目解决什么问题

在真实 App 中，Tabs 往往不是单层结构：

• 外层是页面级切换
• 内层是模块级切换
• 面板中还可能有横向或纵向滚动容器

这时最常见的问题是“手势冲突”：

• 横向拖动到底是谁接管（外层 Tabs、内层 Tabs、还是内部滚动容器）
• 到边界时是否要把控制权交给父层
• 手势中途方向变化时，是否能平滑重选响应者

react-app-tabs 的目标就是把这些行为统一处理掉。

核心能力

1) 跨层滑动优先级管理

组件会维护层级上下文，在同一次手势中按层级与可处理性决策“当前 owner”。

结果是：

• 更深层的可处理目标优先
• 当前层无法继续处理时可向上交接
• 多层嵌套时交互行为一致，不靠业务侧手写抢占逻辑

2) 兼容内部滚动容器

在 Tab 面板里有原生滚动容器（横向或纵向）时，组件会先判断容器是否还能继续滚动：

• 能滚动：优先滚动容器
• 到边界：允许把手势交给外层 Tabs

这让“内容滚动”和“页面切换”可以自然衔接，减少误触和卡顿感。

定位

• 移动端优先
• 无样式内核（不绑定设计语言）
• 面向嵌套复杂度，而非仅单层 Tabs 切换

如果你的场景重点是“多层 Tabs + 内部滚动 + 手势冲突治理”，这个项目就是为此设计的。