課程：RN 跨平台開發基礎 第 1 堂：RN 是什麼，怎麼運作的
課程路線圖
恭喜妳，Aria！在沒有系統性前端背景的情況下，能運用 AI 工具（vibe coding）獨立完成兩款應用程式並成功上架至 iOS 與 Android 雙平台，這是一項非常了不起的成就。市面上許多學習者往往卡在環境建置或語法細節，而妳已經跨越了從「無」到「有」最難的門檻。
目前妳的 APP 處於「能動」的狀態，這代表妳具備極強的邏輯拆解與工具應用能力。然而，當 APP 進入封測、使用者增加、或是功能變得更加複雜時，妳可能會開始感受到一些「不確定感」：
- 為什麼這段程式碼在 iOS 跑得好好的，Android 卻會閃退？
- 為什麼列表滾動時會有一點點卡頓，但 AI 給我的優化建議我看不懂？
- 當導覽路徑變得複雜，頁面之間的資料傳遞開始變得混亂，該怎麼理出頭緒？
這門課的設計初衷，就是為了消除這些不確定感。妳已經完成了由上而下（Top-down）的實作，現在我們要透過由下而上（Bottom-up）的系統性補強，把那些被跳過的「為什麼」補回來。
從「能動」到「真正懂」：學習地圖的設計邏輯
這份課程藍圖並非隨機排列，而是根據一個 React Native 開發者從「初階實作」進階到「中高階架構師」的必經之路來設計的。我們將其拆解為八大主題，每個主題都旨在解決妳在現有專案中可能遇到的核心痛點。
第一階段：底層機制與渲染哲學（Topic 1）
這是一切的起點。React Native 最神奇的地方在於它既不是網頁，也不是完全的原生開發，它是一座「橋」。
在這一章，我們不教怎麼寫元件（因為妳已經會寫了），我們要探討的是 JavaScript 到底是如何控制手機螢幕上的原生元件的。理解了「渲染路徑」的差異（DOM vs. 原生 UI Tree），妳就會明白為什麼妳不能在 RN 裡使用 <div> 或 <span>，以及為什麼某些網頁端的 React 經驗在手機上會失效。
我們還會深入探討 Bridge（橋接器）與 JSI（JavaScript Interface）。這是 RN 效能的核心。舊架構的非同步通訊就像是兩岸透過郵件往返，而新架構的同步呼叫則像是面對面交談。理解這一點，妳在面對「動畫卡頓」或「大數據處理」時，就能從底層找出瓶頸，而不僅僅是調整樣式。
第二階段：UI 系統與跨平台避雷（Topic 2 & 5）
這部分解決的是「樣式跑掉」與「雙平台不一致」的問題。
- 樣式系統： 妳可能發現 RN 的 Flexbox 和 CSS 有微妙的不同（例如預設是垂直排列）。我們會深入
StyleSheet.create的原理，告訴妳為什麼它比 inline styles 更有利於效能。 - 跨平台策略： 這是最耗費開發者精力的地方。iOS 的劉海屏（Safe Area）、Android 的物理返回鍵、不同的鍵盤行為。我們會建立一套「系統性的偵錯框架」，讓妳在遇到平台差異時，知道該去查作業系統的設計規範（Human Interface Guidelines vs. Material Design），還是去調整 RN 的參數。
對於妳的媒體類 APP，這裡的重點在於字型渲染與圖片處理。為什麼同一張圖在 Android 看起來模糊？為什麼字體行高在 iOS 會被切掉？這些細節將決定妳的 APP 是「堪用」還是「精緻」。
第三階段：骨架與大腦——Navigation 與狀態管理（Topic 3 & 4）
當 APP 規模變大，最容易崩潰的地方就是「導覽」與「資料流」。
- Navigation： 我們會拆解 React Navigation 的運作模型。妳會學到「頁面生命週期（Lifecycle）」的概念。這對媒體 APP 極其重要——例如，當使用者切換到下一個分頁時，上一個頁面的影片是否應該自動暫停？這不是靠猜測，而是靠精確掌控
blur與focus事件。 - 狀態管理： 妳可能已經在用
useState，但什麼時候該用Context？什麼時候該引入像Zustand這樣的全域管理工具？我們會探討「衍生狀態（Derived State）」與「過度渲染（Re-render）」的代價，讓妳的 APP 邏輯清晰，不再是一團亂麻。
第四階段：原生能力與效能極限（Topic 6 & 7）
這兩章是讓 APP 展現出「原生質感」的關鍵。
- 原生功能整合： 媒體類 APP 離不開相機、相簿、推播通知。我們會跳出「怎麼調用 API」的層次，去理解權限申請的底層機制，以及如何優化媒體上傳的流程（選取 -> 壓縮 -> 非同步上傳）。
- 效能優化： 這是最具挑戰性的部分。我們會深入研究
FlatList。對於媒體 APP 來說，列表就是靈魂。如何處理幾百則圖文資訊而不閃退？如何利用React.memo避免無謂的計算？我們會教妳使用 Flipper 等專業工具來診斷效能，讓妳能「看見」效能瓶頸。
第五階段：架構規劃與長期維護（Topic 8）
最後，我們會站在制高點，審視妳現有的專案。
我們會討論資料夾結構、API 封裝策略、以及 TypeScript 的型別防護。目標是讓妳在未來半年、一年後回來改程式碼時，還能看懂自己在寫什麼；並且當妳需要增加新功能時，不需要重構整個 APP。
為什麼妳需要這份地圖？
在 vibe coding 的模式下，AI 是妳強大的副駕駛。但副駕駛有時會指錯路，或者選擇一條能到目的地、卻充滿坑洞的小徑。
- 看懂 AI 的意圖： 透過這門課，當 AI 生成一段包含
useCallback的程式碼時，妳不再只是複製貼上，而是能判斷：「喔，它是為了防止這個元件在列表滾動時被重複渲染。」 - 獨立 Debug 的能力： 當報錯訊息出現在原生層（如 Objective-C 或 Java 的錯誤）時，妳不會再感到恐慌，因為妳知道 JS 透過什麼路徑與它們通訊。
- 主動優化： 妳將具備「嗅覺」，能提早察覺潛在的架構問題，在 bug 發生前就將其排除。
連結到妳的實戰經驗：以媒體 APP 為例
在妳目前的兩款 APP 中，多媒體內容的呈現（圖片、文字、音頻/視頻）是核心。在接下來的課程中，我們會頻繁引用這些情境：
- 資訊流優化： 在 Topic 7 中，我們會拿妳的內容列表來做範例，看看如何優化
FlatList的記憶體佔用。 - 播放控制邏輯： 在 Topic 3 中，我們會討論如何在導覽切換時，精準控制多媒體的播放與暫停。
- 快取與離線閱讀： 在 Topic 4 與 Topic 8 中，我們會探討如何處理伺服器回傳的資料，讓使用者在網路不穩時也能有流暢的閱讀體驗。
這門課不是要推翻妳過去的開發方式，而是要給妳一雙「透視眼」，讓妳能看穿程式碼表面，理解底層的運作邏輯。
準備好開始了嗎？
我們不採取死板的教科書式教學，而是會不斷地在「原理」與「妳的實作」之間來回切換。
在進入複雜的 RN 跨平台機制之前，我們必須先確保妳的「內功」——也就是 React 本身的元件模型是紮實的。雖然妳已經在寫 RN，但 RN 裡面的每一行邏輯，其實都源自於 React 的核心哲學。
接下來，我們將進入 Part 1：React 元件模型回顧。我們將重新梳理 JSX 的本質、Props 與 State 的流動，以及那個最常被誤解的問題：「到底什麼時候會觸發 Re-render？」。
掌握了這些 React 的核心心法，後續討論 RN 的原生橋接時，妳才不會被複雜的架構圖搞混。我們出發吧！