第8课：页面导航
进度 0/30
🧭
页面导航
页面之间怎么串门
📖知识引入
📄一个页面管一件事
别把所有功能塞进一个页面！登录页管登录、主页管浏览、设置页管设置——一个页面一个任务，用户才不迷路。
➡️跳转 Push
点击「详情」进入下一页，就像往一摞书上再放一本：新页面盖在上面，看完拿走，又回到原来的页面。
⬅️返回 Back
左上角的「←」、手机的返回手势，把最上面的页面拿走。用户随时能回去，才敢放心往前走——这叫安全感。
🗂️底部标签栏 Tab
看看微信底部：微信、通讯录、发现、我——四个标签切换四个世界。这是APP最经典的「多房间」结构。
🔀路由：页面地址簿
每个页面有个地址（路由），比如 /home、/detail。点击按钮=告诉导航员「去/detail」，它就带你去。整个跳转系统井井有条。
💡
导航就像串门：跳转是进门，返回是回家，标签栏是四个常住房间！
🔍画一个APP的导航地图
// React Native 跳转到「新建习惯」页
function HomeScreen({ navigation }) {
return (
<Button
title="+ 新建习惯"
onPress={() => navigation.navigate("NewHabit")}
/>
);
}给「习惯打卡APP」画导航图（动手试试画你自己的）：
┌─────────┐ ┌──→│ 启动/登录页 │ │ └────┬────┘ │ ▼ │ ┌─────────┐ │ │ 主页(今日打卡)│←──────┐ │ └─┬───┬───┬─┘ │ │ │ │ │ │ │ ▼ ▼ ▼ │ │ ┌────┐┌────┐┌────┐ │ │ │统计页││新建 ││设置 │ │ │ └────┘└─┬──┘└────┘ │ │ │ │ │ └──保存完成──┘ │ └── 退出登录
开发前先画这张图， 所有页面和跳转一目了然， 再让AI按图施工，效率翻倍！🗺️
🎯小测验
第1题：为什么不能把所有功能塞进一个页面？
第2题：微信底部的「微信/通讯录/发现/我」属于什么导航结构？
第3题：「用户随时能返回上一页」给用户带来什么？
📝本课知识点
- ✓一个页面只管一件事
- ✓跳转Push+返回Back是最基本结构
- ✓底部标签栏切换多个主页面
- ✓路由是页面的地址簿
- ✓开发前先画导航地图
第8课完成！继续探索下一课吧 🚀