Flutter vs React Native 怎麼選，取決於團隊熟悉的技術、App 需要多少手機原生功能，以及日後由誰維護，兩者並沒有固定的高下。Flutter 是 Google 支持的開源框架，以 Dart 語言撰寫，畫面由框架自己的元件與繪圖引擎產生；React Native 以 React 搭配 JavaScript 或 TypeScript 開發，執行時對應到 iOS 與 Android 的原生畫面元件。兩者都能用一套程式碼產出 iOS 與 Android 版本，但仍要分別送審，用到框架沒有涵蓋的平台功能時，也要另寫原生程式。
Flutter 與 React Native 各是什麼
Flutter 官方文件把它定位為跨平台的使用者介面工具組，設計目的是讓程式碼在 iOS、Android、網頁與桌面等作業系統之間重複使用，同時能直接呼叫底層的平台服務。開發者透過以 Dart 撰寫的 Flutter 框架開發；它不使用系統內建的介面元件，而是自行實作每一個控制項，再由 Impeller 繪製畫面，網頁版則改用 Skia 引擎。正式版本會直接編譯成機器碼，以網頁為目標時則編譯成 JavaScript 或 WebAssembly。
React Native 官方文件的說明是：以 React 與各平台原生能力開發 Android 與 iOS 應用程式的開源框架。開發者用 JavaScript 呼叫平台 API，並以 React 元件描述畫面；執行時，React Native 會建立對應的 Android 與 iOS 原生畫面元件。新專案預設使用 TypeScript，也支援 JavaScript。Windows、macOS 與網頁等平台，則由合作夥伴或社群專案延伸支援。
React Native vs Flutter 差異比較表
| 比較項目 | Flutter | React Native |
|---|---|---|
| 開發語言 | Dart | JavaScript 或 TypeScript，新專案預設 TypeScript |
| 畫面產生方式 | 框架自行實作元件並繪製，不使用系統介面元件 | 執行時建立對應的 iOS 與 Android 原生畫面元件 |
| 官方涵蓋的平台 | iOS、Android、網頁與桌面 | iOS 與 Android，其他平台由合作夥伴或社群延伸 |
| 開發時預覽修改 | 熱重載，更新畫面並保留 App 狀態 | 快速重新整理，預設開啟 |
| 呼叫原生功能 | 平台通道，原生端可用 Kotlin、Java、Swift、Objective-C | 原生模組，串接框架或現有套件未提供的平台 API |
畫面產生方式的差異，會影響設計稿怎麼做。React Native 官方表示，因為元件背後是 Android 與 iOS 的原生畫面，App 的外觀與操作感受和其他 App 一致；Flutter 的元件由框架自行繪製，可以在兩個平台呈現同一套視覺設計。若品牌希望兩個平台長得一樣，或希望各自貼近平台慣例，應在設計階段先講清楚。
企業選擇前該問的四個問題
- 誰來寫、誰來接手：React Native 官方提醒，要善用它，理解 React 會有幫助；公司或合作廠商已有 React 網頁團隊時，可以沿用既有的知識。若團隊熟悉 Dart，或是從零組建團隊，Flutter 也是可行的選項。
- 官網與後台用什麼技術：App 背後的會員、訂單與 API 若要和官網共用，框架選擇應和後端團隊一起討論，確認資料格式與登入方式一致。
- 維護多久、更新頻率：框架與套件會持續改版，App 上架後要定期升級、配合系統更新重新測試。請廠商說明升級的方式與頻率，並列出專案用到的第三方套件。
- 需要哪些原生功能：相機、藍牙、推播、定位與背景作業，要確認是否已有可用套件；沒有時就要寫平台專屬程式，這會影響時程與後續維護。
功能清單與平台數量是估價的基礎，可對照App開發費用的組成與估算方式，請不同廠商依同一份清單報價。
想用同一套程式碼做網站？先看官方的限制
Flutter 支援網頁輸出，但官方常見問題說明，它適合以應用程式為主的體驗，例如漸進式網頁應用程式、單頁式應用程式，或把既有的 Flutter 手機 App 搬到網頁；目前不適合以文字為主、依文件流排版的靜態網站，例如部落格文章。官方也指出，Flutter 網頁版重視效能與一致性，輸出結果和搜尋引擎正確建立索引所需的格式並不一致，建議把主要的應用程式體驗和登陸頁、行銷內容、說明文件分開，後者用利於搜尋的 HTML 製作。
React Native 的網頁支援來自社群專案。不論選哪一個框架，企業官網、產品介紹與知識文章都建議維持一般網頁架構，App 專心處理會員、訂單、預約等需要登入的功能，官網頁面才能照一般網頁的方式被搜尋引擎收錄，App 改版也不會牽動官網內容。
跨平台框架不適合的情況
- 大量依賴平台專屬功能：例如 iOS 與 Android 的主畫面小工具，Flutter 官方教學說明無法直接用 Flutter 框架繪製小工具的介面，要改用 SwiftUI 或 Jetpack Compose 等平台框架製作。React Native 遇到框架或套件未提供的平台 API，也要自行撰寫原生模組。
- 兩個平台的介面與流程差異很大：若兩邊幾乎要各做一套畫面，共用程式碼的好處就會變小。
- 公司已有穩定的原生開發團隊：iOS 與 Android 工程師各自熟悉平台，改用跨平台框架反而要重新培養技能。
- 核心任務在瀏覽器就能完成：內容查詢、表單填寫這類需求，響應式網站可能就夠用，不一定要做 App。
不論選哪個框架都要做的事
跨平台只是共用 App 端的程式碼，上架與維護的工作並不會少。Apple 說明會審查所有提交到 App Store Connect 的 App 與更新，Google Play 也要在 Play 管理中心送交審查，兩個平台的審查規定、隱私權資訊與帳號刪除要求都要各自符合。開發者帳號以公司名義申請，原始碼、建置設定與套件清單要完整交付；測試則要在兩個平台的實機上逐項進行。各階段要確認的事項，可參考App開發流程與上架準備。
常見問題
Flutter 和 React Native 哪個效能比較好？
兩者的官方文件都沒有提供可直接比較的標準數據，實際表現取決於畫面設計、資料量與程式寫法。對流暢度要求高的功能，建議做出原型後在目標機型上實測，再決定框架。
已經做好的 App 可以換框架嗎？
兩者的語言與畫面元件不同，換框架等於重寫 App 端程式，後台與 API 若獨立設計則可以沿用。決定前先評估既有程式的維護狀況與重寫範圍，再比較繼續維護和重寫的成本。
外包廠商用哪個框架，企業需要在意嗎？
需要。框架決定日後接手的工程師要具備哪種技能，以及原生功能怎麼擴充。簽約前請廠商說明選擇理由，並確認原始碼、建置設定與套件清單都會完整交付。
只做 iOS 或只做 Android，也適合用跨平台框架嗎？
可以，但共用程式碼的好處較小。若短期內不打算做另一個平台，也可以評估原生開發；若之後可能擴充到另一個平台或網頁，跨平台框架能保留彈性。
用跨平台框架，開發工作就能大幅減少嗎？
不一定。共用的是 App 端的部分程式碼，介面調整、平台專屬功能、兩個平台的測試與送審仍要分別處理，後台與 API 的工作量也不會因框架而改變。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
建議先列出 App 的核心功能、會用到的手機原生功能，以及公司內部或合作廠商熟悉的技術，再比較兩個框架。京采的網頁設計服務可以協助需求釐清，規劃 App 背後的後台管理系統與 API 串接，並把行銷內容放在利於搜尋的官網頁面；想討論技術選擇，歡迎與我們聯繫。
