React Native 导航：stack、tabs 和登录流程怎么设计

React Native navigation 实用指南：stack、tabs、params、auth screens，以及如何保持用户路径清晰。

这篇文章面向 NativePath 学习者和正在规划移动产品的人。重点不是堆关键词，而是把 React Native 学习变成可以验证、可以解释、可以放进项目里的能力。

为什么这个主题重要

Navigation 不只是切换页面。它决定用户在应用里的心理地图。如果 stack、tabs 和登录流程混乱，再漂亮的 UI 也会让人迷路。React Native 的 navigation 设计应该从 user journey 开始：哪些页面公开，哪些需要登录，返回按钮应该去哪里。

移动开发学习只有和一个屏幕、一个用户动作、一个可验证的结果连起来，才真正有用。把 scope 控制到可以完成，但又要足够真实，让你学习产品行为，而不只是学习语法。

如何处理这个问题

先从用户路径开始，再选择工具。想清楚 learner 或 customer 第一眼看到什么，需要哪些数据，流程可能在哪里失败。这样可以避免初学者常见的问题：写了很多零散 snippet，却不理解移动应用作为一个完整 flow 如何运行。

做一个小 flow：onboarding、login、tabs、detail screen 和 settings。写下每一次跳转。然后问自己：用户按返回键时会怎样？token 过期时会怎样？

实用拆解

检查清单

• 选择一个小 screen 或 flow;
• 除了正常路径，也测试一个失败场景;
• 把结果连接到作品集项目;
• 如果解释还模糊，就缩小范围重新做一次;

一个实用 checkpoint 是：你能不能用简单语言解释 tradeoff。如果答案依赖一段你不理解的 snippet，就放慢速度，重新做最小版本。如果你改变一个条件后仍能预测结果，说明这个主题开始变得真正实用。

如何在 NativePath 中使用

可以用 /zh/courses 走结构化路线；用 /zh/games 做短练习；需要检验速度和准确率时，再打开 /zh/arena。 记录哪里坏了、你测试了什么、下一版会改进什么。这个习惯会把 tutorial 练习变成 portfolio 证据。

继续学习前

当你能展示一个小的可运行例子，说出一个 edge case，并解释当前 scope 为什么适合这个方案时，就可以继续下一步。现在不需要完美 app。你需要的是清晰的下一步，以及能通过真机检查的结果。

练习路线

导航练习不要只做两个页面跳转。请设计一个真实 flow：公开首页、登录页、课程列表、课程详情和一个需要登录的 dashboard。然后写下每个 screen 的进入条件，以及用户点击返回时应该去哪里。这样你会更早发现 nested navigator、params 和 auth guard 的问题。

另一个实用检查是 deep link 或刷新后的状态恢复。即使你暂时不做完整 deep linking，也要知道用户直接进入详情页时缺少数据怎么办。好的 navigation 不是页面越多越厉害，而是用户永远知道自己在哪里。

常见错误

不要让每个 screen 随意跳到任何地方。导航应该服务于用户任务，而不是展示你会写多少 route。初学者常见问题是：登录后返回登录页、详情页缺少 params、tab 内嵌 stack 后返回行为混乱、protected screen 在 session 恢复前闪一下。

练习时请画出简图：公开区、认证区、课程区、设置区。再标记哪些 route 需要登录，哪些 route 可以匿名访问。这个图会帮你提前发现结构问题。