Flutter vs React Native 2024：跨平台開發框架怎麼選？

跨平台行動應用開發框架讓開發者能用一套程式碼同時開發 iOS 與 Android App，大幅降低開發成本。2024 年，Flutter 與 React Native 仍是兩大主流選擇。本文從多個面向比較兩者差異，幫助你做出最適合的技術選型。

核心差異

渲染引擎

Flutter：使用 Skia 渲染引擎，直接繪製每個像素到畫布上。不依賴原生元件，UI 一致性極高。

// Flutter Widget 範例
class CustomButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  const CustomButton({required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return Material(
      borderRadius: BorderRadius.circular(8),
      color: Colors.blue,
      child: InkWell(
        onTap: onPressed,
        borderRadius: BorderRadius.circular(8),
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
          child: Text(text, style: TextStyle(color: Colors.white)),
        ),
      ),
    );
  }
}

React Native：透過 JavaScript Bridge 與原生元件溝通，最終渲染的是原生 UI 元件。

// React Native 元件範例
const CustomButton = ({ text, onPress }) => (
  <TouchableOpacity
    onPress={onPress}
    style={styles.button}
  >
    <Text style={styles.buttonText}>{text}</Text>
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#007AFF',
    borderRadius: 8,
    paddingHorizontal: 24,
    paddingVertical: 12,
  },
  buttonText: {
    color: 'white',
  },
});

效能比較

項目	Flutter	React Native
啟動時間	較快	中等
動畫流暢度	60fps 穩定	可能有掉幀
記憶體使用	較高	較低
套件大小	較大 (~15MB)	較小 (~10MB)

動畫效能

Flutter 的動畫效能明顯優於 React Native，尤其是複雜動畫場景：

// Flutter 動畫（使用 AnimationController）
class AnimatedLogo extends StatefulWidget {
  @override
  _AnimatedLogoState createState() => _AnimatedLogoState();
}

class _AnimatedLogoState extends State<AnimatedLogo>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );
    _controller.repeat(reverse: true);
  }

  @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      scale: _animation,
      child: FlutterLogo(size: 100),
    );
  }
}

開發體驗

Hot Reload

兩者都支援 Hot Reload，但體驗略有不同：

Flutter：Hot Reload 速度極快（< 1 秒），狀態保留良好
React Native：Fast Refresh 也很快，但有時需要完整重載

除錯工具

Flutter DevTools：

Widget Inspector
Performance Overlay
Memory Profiler
Network Inspector

React Native Debugger：

Chrome DevTools 整合
Redux DevTools
Network Inspector
Element Inspector

生態系統

套件數量（2024 年）

Flutter：pub.dev 上約 40,000+ 套件
React Native：npm 上約 30,000+ 相關套件

常用套件比較

功能	Flutter	React Native
狀態管理	Provider, Riverpod, GetX	Redux, MobX, Zustand
路由	go_router, auto_route	React Navigation
網路請求	dio, http	axios, fetch
本地儲存	shared_preferences, hive	AsyncStorage, MMKV
地圖	google_maps_flutter	react-native-maps

適用場景

選擇 Flutter 的情況

UI 高度客製化：需要精緻的動畫和自訂 UI
效能優先：對流暢度要求極高
多平台支援：同時需要 Web、Desktop 版本
團隊技能：團隊熟悉 Dart 或願意學習

選擇 React Native 的情況

Web 開發背景：團隊熟悉 React 和 JavaScript
原生整合多：需要大量原生模組整合
快速 MVP：需要快速驗證產品概念
既有 JS 生態：想利用既有 npm 套件

實際專案考量

開發速度

Flutter：初期學習曲線較陡，但後期開發速度快
React Native：Web 開發者上手快，但跨平台問題可能較多

維護成本

Flutter：升級通常平順，向後相容性佳
React Native：版本升級有時需要處理 Breaking Changes

團隊建議

團隊背景	建議選擇
純前端/React 團隊	React Native
原生 App 團隊	Flutter
新組建團隊	Flutter
需要 Web 整合	React Native (共享程式碼)

結論

2024 年，Flutter 和 React Native 都是成熟的跨平台解決方案。選擇時應考慮：

團隊技術棧：現有技術能力和學習意願
專案需求：UI 複雜度、效能要求、平台支援
長期維護：版本升級策略、社群活躍度

沒有絕對的「最佳選擇」，只有「最適合的選擇」。建議實際試做 PoC 後再做決定。

如果你正在評估跨平台開發框架，歡迎聯繫我們討論你的專案需求。