第 6 章 常用功能与工程实践

第 6 章 · 常用功能与工程实践

章节摘要：本章是"把学会的一切组装成完整应用"的收官章。覆盖六个真实应用绕不开的功能模块：页面导航、网络请求、本地存储、手势交互、原生能力与调试工具。每个模块都按"RN 怎么解、Flutter 怎么解、坑在哪"的结构讲解，读完你能独立完成一个带导航、联网、存储、交互的完整应用。

读前必看（下）

阅读完本章，你应当能够：

1. 用 React Navigation 与 Flutter Navigator 实现页面跳转与传参。
2. 用 Fetch/Axios 与 Dio/Http 发起网络请求并解析数据。
3. 用 AsyncStorage 与 shared_preferences 实现本地数据存储。
4. 处理常见手势与用户交互。
5. 理解访问原生能力的机制与第三方库的使用。
6. 用两套调试工具链定位并解决问题。

核心概念速览

一句话点题：导航、网络、存储、手势、原生能力、调试——这六个模块就像应用的"器官"，本章把它们逐个接通，让应用真正完整地运转起来。

子章节导航

6.1 页面导航：React Navigation 与 Navigator

讲导航的两种主要形态：栈式导航（页面堆叠、返回逐层弹出）与标签导航（底部或顶部切换模块）。RN 用 React Navigation 库，Flutter 用 Navigator 与路由。这一节是"多页面应用"的入口。

导航是"多页面"与"单页面"的分水岭。在动手之前先理解一个关键差异：RN 的 React Navigation 是社区库（需要安装），Flutter 的 Navigator 是框架内置能力（开箱即用）。这意味着 Flutter 的第一条导航代码几乎不需要任何配置，而 RN 要先安装依赖、再包裹导航容器。这个差异也折射出两套生态的组织方式——RN 重社区选型，Flutter 重官方一体化。读这节时，把"栈式"与"标签式"两种导航的心智模型建立起来，比背 API 更重要。

6.2 网络请求与数据解析

讲从 API 拉数据的三步：发起请求、解析响应、更新状态。RN 用 Fetch 或 Axios，Flutter 用 Http 或 Dio。同时讲清异步加载的界面状态管理（加载中、成功、失败），这是真实应用联网的必修课。

网络请求是移动应用连接世界的窗口。这一节有个容易被新手忽略的要点：联网不只是"发请求"，还包括请求的三个界面状态——加载中要显示转圈、失败要显示重试、成功要渲染数据。很多 Demo 只做最后一步，真实应用恰恰死在"失败时界面卡死"上。建议把"加载中、成功、失败"三态封装成一个通用组件，每个联网页面都复用它。这是从"能联网"到"可靠联网"的关键跨越。

6.3 本地数据存储方案

讲把数据保存在本地的方案：RN 的 AsyncStorage，Flutter 的 shared_preferences。以及何时该用轻量键值存储、何时该上数据库（SQLite 类方案）的判断。让应用"关掉再打开，数据还在"。

本地存储解决的是"离线可用"与"启动加载"两个问题。先建立一个分层认知：键值存储（AsyncStorage、shared_preferences）适合存"少量、简单、按 key 存取"的数据——用户偏好、登录态、轻量配置；数据库（SQLite 类）适合存"大量、结构化、需要查询"的数据——消息记录、离线缓存。用键值存储硬塞复杂数据，是新手常见的过度使用。理解这个分层，选存储方案就不纠结。

6.4 手势与用户交互处理

讲常见的触摸与手势：点击、长按、滑动、拖拽。RN 的 Touchable 系列与 PanResponder，Flutter 的 GestureDetector。这一节让界面从"能看"变成"能玩"。

手势是移动端区别于桌面的交互灵魂。入门阶段掌握点击与长按就够用，进阶再碰滑动、拖拽与手势冲突。这里有个值得提前建立的认知：手势系统处理的是"意图识别"——用户的手指在屏幕上划过，框架要判断这到底是滚动、点击还是拖拽。RN 与 Flutter 各自有手势竞争与冲突的机制，遇到"滑动与点击打架"这类问题时，先想清楚手势的层次关系，再动手修。

6.5 访问原生能力与第三方库

讲跨过 JS/Dart 层调用原生能力：相机、定位、推送、传感器。RN 用原生模块与第三方库，Flutter 用平台通道与插件。同时给出"选库之前先评估"的实用建议。

原生能力是跨平台框架的"能力边界测试"——能用跨平台代码实现的功能直接写，必须借力原生的一律走桥。这一节先讲两套桥接机制的原理（RN 原生模块、Flutter 平台通道），再讲"先查库、再评估、后选型"的决策流程。选库评估有三个维度：维护活跃度（多久没更新了）、平台覆盖度（双端是否都支持）、API 稳定性（版本波动大不大）。这三问能筛掉大部分坑库。

6.6 调试工具与热重载

讲两套调试工具链：RN 的 Metro、Flipper、React DevTools，Flutter 的 DevTools、Widget Inspector。以及热重载的进阶用法与常见调试场景的排查路径。让"出问题找得到原因"。

调试是工程能力的试金石。这一节会把第 2 章装好的工具串成一条完整的调试链：日志定位（console.log、debugPrint）、断点调试（VS Code 附加）、UI 检查（React DevTools、Widget Inspector）、网络检查（Flipper、DevTools Network）、性能分析。建议按"问题类型 → 对应工具"的方式建立排查地图：布局问题看 Inspector、逻辑问题下断点、网络问题查请求、性能问题看帧率。地图在手，调试不再抓瞎。

子章节之间的逻辑关系

六个模块有两条暗线。使用频率线：导航与网络是最常用的两个模块，先掌握它们就能做出"能跑的多页面联网应用"；存储、手势、原生能力是按需增强。依赖关系线：网络请求依赖状态管理（第 5 章）、导航传参依赖状态与生命周期、调试工具贯穿所有模块。建议顺序：6.1 → 6.2 → 6.3 → 6.4 → 6.5 → 6.6，前两节优先，后四节按项目需求穿插学习。

读本章时建议带着一个贯穿目标：把第 4、5 章的待办应用升级为"完整应用"。待办应用加上导航（列表页到详情页）、联网（从 API 拉待办）、存储（待办存本地）、手势（滑动删除待办）、调试（排查一个故意引入的 bug），就成了一款麻雀虽小五脏俱全的产品。这个"毕业设计"式目标比零散学六个模块更能检验与巩固前几章的知识——每个模块学完，都往这个应用里加一块功能。

6.1 导航 ──► 6.2 网络 ──► 6.3 存储
                              │
6.4 手势 ◄── 6.5 原生能力 ◄───┘
                              │
                       6.6 调试贯穿全程
​

前置知识与后续延伸

• 前置知识：第 4 章的组件体系（页面就是组件的组合）与第 5 章的状态管理（网络数据、导航状态都要进状态）。生命周期管理（5.4 节）在本章的网络请求与订阅清理里会反复用到。
• 后续延伸：本章学完，你将能独立完成一个完整的跨平台应用。如果想把应用真正发布，后续还需了解打包、签名、上架流程——这些内容超出了本教程范围，但本章的调试与原生能力基础是它们的前提。把第 4、5 章的待办应用升级成"带导航、联网、存储"的完整版本，就是本教程最好的毕业设计。整套教程至此收官，剩下的路，就是你在真实项目里继续探索了。