Home > react-nav-router > NavStack

NavStack() function

Nav 页面栈控制器组件

维护一个「页面栈」，按栈顶渲染当前页面；在 stack 发生 push / pop / replace 时同时渲染新旧两个页面，通过 CSS transition 实现 iOS 风格的过渡动画： - push：新页面从右滑入，旧页面左移 50% 淡出 - pop： 旧页面向右滑出，新页面从左 50% 位置滑入 - replace：新旧页面交叉淡入淡出

工作流程： 1. stack 变化触发 effect，用**双 requestAnimationFrame** 保证浏览器 先绘制一帧"开始态"，再切换到"结束态"——两帧间的样式差异是 CSS transition 生效的必要条件（与 React 批处理无关；同步 DOM 写入 会被合并为一次绘制，transition 不会触发） 2. 动画跑满 transitionDuration 后把动画基线推进到新 stack，回到稳态 3. 动画未结束前又发生 stack 变化：丢弃中间态，直接以当前 stack 作为 新的动画基线（不累积动画队列，避免视觉错乱）

Signature:

NavStack: <T extends object = object>(props: NavStackProps<T>) => React__default.ReactElement

Parameters

Parameter	Type	Description
props	NavStackProps<T>

Returns:

React__default.ReactElement