2、跨平台开发基础：跨平台概念、主流跨平台框架对比（React Native/Flutter/uni-app）、平台差异分析
各位同学好，今天我们来聊聊跨平台开发的基础。说实话，我刚入行那会儿，跨平台还是个挺玄乎的概念。那时候做移动端，要么选 iOS，要么选 Android，两边代码完全不互通。后来项目多了，老板开始问：「能不能一套代码跑两个平台？」嗯，跨平台的需求就这么来了。
2.1 跨平台概念：到底什么是跨平台？
跨平台开发，说白了就是「写一次代码，部署到多个平台」。这里的平台通常指 iOS、Android、Web、甚至桌面端（Windows、macOS、Linux）。
我个人的理解是：跨平台不是银弹，它解决的是「业务逻辑复用」的问题，而不是「UI 完美一致」的问题。你想想看，如果每个平台都要单独写一套 UI，那维护成本得多高？
核心目标： 最大化代码复用，最小化平台差异带来的工作量。
跨平台开发的常见模式有三种：
- Web 容器模式： 比如 Cordova、uni-app，本质是在原生 App 里套一个 WebView，用 HTML/CSS/JS 渲染 UI。优点是上手快，缺点是性能受限。
- 原生渲染模式： 比如 React Native、Weex，用 JS 写逻辑，但 UI 组件最终映射为原生控件。性能比 WebView 好很多。
- 自绘引擎模式： 比如 Flutter，用 Skia 引擎自己绘制 UI，不依赖原生控件。性能最接近原生，但包体积会大一些。
我记得有一次面试，候选人说「跨平台就是一套代码跑所有平台」。我笑了笑，问他：「那 iOS 的导航栏和 Android 的返回键怎么统一？」他愣住了。嗯，这就是我们要深入的地方。
2.2 主流跨平台框架对比
目前市面上最火的三个框架：React Native、Flutter、uni-app。我三个都用过，各有各的脾气。下面这张图是我自己整理的对比逻辑，你看完应该能有个整体印象。
2.3 平台差异分析：那些你不得不踩的坑
跨平台开发最头疼的是什么？不是写业务逻辑，而是处理平台差异。我曾经在一个项目里，iOS 上跑得好好的，Android 上直接白屏。查了半天，原来是某个 CSS 属性在 Android WebView 里不支持。
下面我列几个常见的差异点，都是我在项目中真实遇到过的：
| 差异维度 | iOS | Android | 跨平台处理建议 |
|---|---|---|---|
| 导航栏 | 原生 UINavigationBar | Toolbar/ActionBar | 使用框架提供的统一组件，如 React Navigation |
| 返回手势 | 左滑返回（默认） | 物理返回键 | 需要监听硬件返回事件，做兼容处理 |
| 字体渲染 | 字体平滑，默认中文好看 | 部分字体需要额外引入 | 统一使用系统字体或自定义字体包 |
| 屏幕适配 | 以 pt 为单位 | 以 dp 为单位 | 使用 rpx 或百分比布局，避免写死 px |
| 权限管理 | 权限请求较严格 | 权限分类更细 | 使用框架封装的权限 API，不要直接调原生 |
| 键盘处理 | 键盘弹出自动调整布局 | 需要手动监听键盘事件 | 使用 KeyboardAvoidingView 等组件 |
⚠️ 注意： 平台差异不是 bug，是特性。不要试图抹平所有差异，有些平台特有的交互习惯（比如 iOS 的侧滑返回）强行统一反而会让用户觉得别扭。
2.4 我的选型建议
如果你问我怎么选，我会说：
- 团队是前端出身？ 选 React Native 或 uni-app。RN 生态更国际化，uni-app 在国内更接地气（比如集成支付、分享等）。
- 追求极致性能？ 选 Flutter。我做过一个动画密集型的 App，Flutter 的 60fps 渲染确实稳，RN 在复杂动画上偶尔会掉帧。
- 需要同时覆盖小程序？ uni-app 是首选。它一套代码可以编译到 iOS、Android、H5、小程序、支付宝小程序等，省心不少。
💡 小技巧： 不管你选哪个框架，都建议在项目初期就搭建好「平台差异层」。把需要平台特判的逻辑抽离出来，不要散落在业务代码里。我曾经吃过这个亏，后期维护简直想哭。
2.5 一个简单的代码示例
下面我用 React Native 演示一下如何处理平台差异。这个例子很简单，就是根据平台显示不同的图标：
import { Platform, Text, View } from 'react-native';
const PlatformExample = () => {
// 判断当前平台
const os = Platform.OS;
return (
<View>
<Text>
当前平台：{os === 'ios' ? '🍎 iOS' : '🤖 Android'}
</Text>
{Platform.select({
ios: <Text>iOS 特有：使用 UINavigationBar</Text>,
android: <Text>Android 特有：使用 Toolbar</Text>,
default: <Text>其他平台</Text>,
})}
</View>
);
};
你看，代码本身不复杂。但关键是你要有「平台意识」——写每一行代码前，先想想它在另一个平台上会不会出问题。
好了，这一章的内容就到这里。跨平台开发不是一蹴而就的事，需要你在实践中慢慢积累经验。下一章我们会深入 React Native 的架构和核心原理，到时候见。