跨平台应用：什么是它，Flutter、React Native和KMP对比

什么是跨平台应用？

跨平台应用 — 设计为从单一代码库在多个移动操作系统上运行的软件。与为iOS（Swift）和Android（Kotlin）分别进行两个独立项目的原生开发不同，跨平台开发将业务逻辑、用户界面和数据层整合在一个项目中。

跨平台开发的概念始于2009年的PhoneGap（后来是Apache Cordova），它将Web应用打包到原生WebView中。现代框架已经取得了长足进步：Flutter通过Dart编译为原生ARM代码，React Native使用带有原生桥接的JavaScript引擎，而Kotlin Multiplatform将共享代码编译为平台特定的二进制文件。到2026年，超过40%的新移动应用至少使用一种跨平台技术。

关键指标：上市时间加快30–50%，与两个原生团队相比成本降低30–40%，支持在两个平台上统一功能集。然而，跨平台应用仍面临挑战——平台特定的UI特性、对硬件API的访问以及动画和游戏等对性能要求较高的功能。

Flutter：架构和性能

Flutter — 谷歌的开源UI框架，使用Dart语言，拥有自己的Skia（4.x版本中为Impeller）渲染引擎。与使用平台原生组件的框架不同，Flutter独立渲染每个像素，提供对界面的完全控制。这种方法消除了平台间的差异，但会增加应用大小5–15 MB。

// Flutter — 简单计数器
import 'package:flutter/material.dart';

void main() { runApp(const CounterApp()); }

class CounterApp extends StatelessWidget {
  const CounterApp({super.key});

  Widget build(BuildContext context) {
    return const MaterialApp(home: CounterScreen());
  }
}

class CounterScreen extends StatefulWidget {
  /* ... */
}

class _CounterScreenState extends State<CounterScreen> {
  int _count = 0;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('跨平台计数器')),
      body: Center(
        child: Column(
          children: [
            const Text('您按了这么多次按钮：'),
            Text('$_count',
              style: const TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { setState(() { _count++; }); },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Flutter的核心是Widget架构：从间距和对齐到布局约束，一切都是Widget。这种继承自React的声明式模型使UI可预测。得益于Dart的AOT编译，Flutter应用在不到2秒内启动，即使在中端设备上也能保持60 FPS。Impeller——新的渲染引擎——消除了着色器编译时的卡顿，这是Skia的主要问题。

React Native：JavaScript桥接和生态系统

React Native — Meta的跨平台框架，用于使用JavaScript/TypeScript和React创建移动应用。与Flutter不同，React Native通过JavaScript桥接使用平台的原生UI组件（iOS上的UIView，Android上的View）。业务逻辑在JavaScript引擎（Hermes或JSC）中执行，与原生模块异步交互。

// React Native — 带平台代码的组件
import React, { useState } from 'react';
import {
  View, Text, TouchableOpacity, Platform
} from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  const greeting = Platform.select({
    ios: 'iOS版你好',
    android: 'Android版你好',
    default: '你好',
  });

  return (
    <View>
      <Text>{greeting}</Text>
      <Text>{count}</Text>
      <TouchableOpacity
        onPress={() => setCount(c => c + 1)}>
        <Text>+1</Text>
      </TouchableOpacity>
    </View>
  );
};

React Native最大的优势在于其生态系统。npm拥有超过200万个包，React Navigation、Expo和Reanimated等库为导航、手势和动画提供了现成的解决方案。Expo——一种托管工作流——通过OTA更新和50多个内置原生模块简化了构建和发布。Instagram、Shopify和Discord总月活跃用户超过5亿，都运行在React Native上。

Kotlin Multiplatform：共享逻辑与原生UI

Kotlin Multiplatform (KMP) — JetBrains的技术，将共享的Kotlin代码编译为平台特定的二进制文件。与Flutter和React Native不同，KMP不提供UI框架——它的任务是重用业务逻辑、数据层、网络请求和验证，同时保持界面完全原生。Netflix、麦当劳和VMware在生产中使用KMP。

// Kotlin Multiplatform — commonMain中的共享仓库
class UserRepository(
    private val api: KtorClient,
    private val db: Database
) {
    suspend fun getUsers(): Result<List<User>> {
        return try {
            val users = api.fetch<List<UserDto>>("/users")
            db.save(users.map { it.toDomain() })
            Result.success(db.getAll())
        } catch (e: Exception) {
            Result.failure(e)
        }
    }
}

// expect/actual — 平台的日期格式化
expect fun formatDate(timestamp: Long): String

KMP的关键模式是expect/actual机制。在公共模块（commonMain）中声明expect函数或类，在每个平台源代码集（androidMain，iosMain）中提供actual实现。这允许使用原生API——SharedPreferences、NSUserDefaults、相机、生物识别——同时在共享代码中保持统一的公共接口。Compose Multiplatform——KMP的UI层——在2025年达到了Android和Desktop的稳定版本，iOS版本仍处于Beta测试阶段。

跨平台框架对比

性能因场景而异。Flutter的自有渲染为动画和过渡提供稳定的60 FPS。React Native的桥接架构每次原生调用会增加2–5毫秒延迟，尽管新的JSI（JavaScript接口）层正在缩小这一差距。KMP在共享代码上零开销，因为它直接编译为平台二进制文件。对于UI密集型且具有复杂动画的应用，选择在Flutter和原生开发之间。

如何选择合适的框架

在Flutter、React Native和KMP之间的选择取决于项目的优先级。如果您需要像素完美的UI和对动画的完全控制——Flutter提供最一致的跨平台体验。如果团队熟悉JavaScript/React并看重最大的第三方库生态系统——React Native是务实的选择。如果已有原生应用且需要共享业务逻辑——KMP允许在不影响UI的情况下逐模块实施共享代码。

对于MVP和初创公司，Flutter或React Native以80–100%的共享代码提供了通往市场的最短路径。对于企业应用，在现有原生基础上，KMP允许逐步迁移模块。游戏和媒体应用通过自定义渲染受益于Flutter或完全原生方法。每个框架都证明了其成熟度——Instagram（React Native）、Google Pay（Flutter）和Netflix（KMP）都运行在跨平台技术上。

趋势：Flutter以统一代码库扩展到桌面和Web。具有新架构（Fabric + TurboModules）的React Native完全消除了桥接。KMP通过Compose Multiplatform在保持原生性能的同时追求统一的UI层。到2027年，跨平台和原生开发之间的界限将完全模糊——框架正在转向平台编译路径。