Flutter vs React Native
全方位对比Google基于Dart的Flutter与Meta基于JavaScript/TypeScript的React Native。2025年哪个跨平台框架更胜一筹?
平台深度集成、极致性能、最佳用户体验
单一代码库,双平台覆盖——速度与成本优势
| 分类 | Native (Swift/Kotlin) | Cross-Platform (Flutter/RN) |
|---|---|---|
| 性能 | 10/10 | 8/10 |
| 学习难易度 | 6/10 | 8/10 |
| 生态系统 | 10/10 | 8/10 |
| 社区 | 9/10 | 9/10 |
| 就业市场 | 9/10 | 8/10 |
| 面向未来 | 9/10 | 8/10 |
// Swift(iOS)- HealthKit 集成(仅原生可实现)
import HealthKit
import SwiftUI
@Observable
class HealthViewModel {
var stepCount: Int = 0
var heartRate: Double = 0
var activeCalories: Double = 0
private let healthStore = HKHealthStore()
func requestPermission() async throws {
let readTypes: Set<HKObjectType> = [
HKObjectType.quantityType(forIdentifier: .stepCount)!,
HKObjectType.quantityType(forIdentifier: .heartRate)!,
HKObjectType.quantityType(forIdentifier: .activeEnergyBurned)!
]
try await healthStore.requestAuthorization(toShare: [], read: readTypes)
}
func fetchTodayStats() async throws {
let now = Date()
let startOfDay = Calendar.current.startOfDay(for: now)
let predicate = HKQuery.predicateForSamples(
withStart: startOfDay, end: now, options: .strictStartDate
)
// 步数
let stepType = HKQuantityType(.stepCount)
let stepQuery = HKStatisticsQuery(
quantityType: stepType,
quantitySamplePredicate: predicate,
options: .cumulativeSum
) { [weak self] _, result, _ in
Task { @MainActor in
self?.stepCount = Int(result?.sumQuantity()?.doubleValue(for: .count()) ?? 0)
}
}
healthStore.execute(stepQuery)
}
}
// ARKit 集成 —— 原生独占
import ARKit
import RealityKit
struct ARViewContainer: UIViewRepresentable {
func makeUIView(context: Context) -> ARView {
let arView = ARView(frame: .zero)
let config = ARWorldTrackingConfiguration()
config.planeDetection = [.horizontal, .vertical]
arView.session.run(config)
// 加载并放置 3D 模型
let anchor = AnchorEntity(plane: .horizontal)
let box = ModelEntity(mesh: .generateBox(size: 0.1))
anchor.addChild(box)
arView.scene.addAnchor(anchor)
return arView
}
func updateUIView(_ uiView: ARView, context: Context) {}
}// Flutter - 访问平台功能(Method Channel)
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
// 平台通道定义
const platform = MethodChannel('com.myapp/native');
class NativeFeatureService {
// iOS 上为 HealthKit,Android 上为 Health Connect
static Future<Map<String, dynamic>> getHealthData() async {
try {
final result = await platform.invokeMethod<Map>('getHealthData');
return Map<String, dynamic>.from(result ?? {});
} on PlatformException catch (e) {
debugPrint('HealthKit/Health Connect 错误:${e.message}');
return {};
}
}
// 设备专属的生物识别认证
static Future<bool> authenticateWithBiometrics() async {
try {
return await platform.invokeMethod<bool>('biometricAuth') ?? false;
} on PlatformException catch (e) {
debugPrint('生物识别错误:${e.message}');
return false;
}
}
}
// Flutter UI(两个平台完全一致)
class HealthDashboard extends StatefulWidget {
const HealthDashboard({super.key});
@override
State<HealthDashboard> createState() => _HealthDashboardState();
}
class _HealthDashboardState extends State<HealthDashboard> {
Map<String, dynamic> healthData = {};
@override
void initState() {
super.initState();
loadHealthData();
}
Future<void> loadHealthData() async {
final data = await NativeFeatureService.getHealthData();
setState(() => healthData = data);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('健康概览')),
body: ListView(
children: [
_StatCard(label: '步数', value: '${healthData["steps"] ?? 0}'),
_StatCard(label: '卡路里', value: '${healthData["calories"] ?? 0} kcal'),
],
),
);
}
}决策取决于团队规模、预算和应用复杂度。小团队 + 预算有限 + 内容型应用 → 跨平台更合理。大团队 + 需要深度平台能力 + 性能至关重要 → 应选择原生开发。Kotlin Multiplatform 通过共享业务逻辑同时保持原生 UI,为两者之间提供了一条不错的折中路径。
获取免费咨询KMP 是一种混合方案:业务逻辑、网络层和数据模型通过 Kotlin 共享,UI 则在每个平台上以原生方式编写。它结合了原生性能与代码复用的优势。