移动端开发介绍
移动端开发方向分为两大类：小程序开发（微信/支付宝/抖音/百度）、App开发。
目前移动端开发方式分为三种：原生App/小程序开发、跨平台开发、H5页面开发。
对于全栈选手来说，选择跨平台方式上手更快。下面是跨平台开发相关技术的对比，Uniapp、Taro主要用于小程序，React Native、Flutter主要用于App开发。
| 维度 | uniapp | uniappx | Taro | React Native | Flutter | Kuikly |
|---|---|---|---|---|---|---|
| 技术栈 | Vue + JS/TS | UTS (类 TS) + Vue | React | JS/TS + React | Dart | Kotlin |
| 渲染方式 | H5/小程序按各端渲染；App-Vue 主要 WebView；App-nvue 可原生渲染 | UTS 编译到 Kotlin/Swift/ArkTS/JS；uvue 原生渲染 | 编译到 H5/小程序；App 端基于 React Native | 原生组件 (Fabric) | 自绘引擎 (Impeller) | 原生组件 |
| 性能 | 低 | 高（原生级） | 中等 | 中高 | 高（动效最强） | 高（原生级） |
| 鸿蒙支持 | ❌ 偏WebView /容器路线 | ✅ 编译为 ArkTS | ⚠️有鸿蒙/ArkTS 方向，需看版本和插件生态 | ⚠️ 社区 RNOH，成熟度和 RN 主线有差距 | ❌ 非官方社区 fork | ✅ 原生级 |
| 动态化/热更新 | ✅ | ⚠️ 成长 | H5/小程序天然动态；App 端取决于 RN/宿主方案 | ✅ Code Push | ❌走商店发版 | ✅ 内置页面级 |
| H5 产物大小 | 小 | Web 端存在，但不是主要优势 | 中小，H5/小程序优势 | 中 | 大（WASM 自绘） | 极小（463KB） |
| 社区生态 | 国内极强 | 成长中 | 活跃，京东系 | 全球极强 | 全球极强 | 国内为主，腾讯系 |
| 跨端覆盖 | 全端，小程序优先 | 五端 | 多平台应用，小程序优先 | Android/iOS/Web | 六端 | 五端 |
原生宿主 App
├── 核心链路（首页框架、播放器、支付、IM…）→ 原生
├── 部分业务页 / 活动页 / 增长页 ─────────────→ RN / Flutter / H5
└── 某些独立模块或新业务线 ──────────────────→ 更敢全量用 FlutterReact Native VS Flutter
React Native适合react开发者切换到移动端，目前国内主流App在使用的有：爱奇艺、美团、快手、小红书、知乎、京东、携程、微信读书…
Flutter的自绘引擎（不靠系统控件）适合做出复杂的UI动画，目前国内主流App在使用的有：闲鱼、钉钉、微博、阿里云盘、夸克、微信（部分）、腾讯元宝…
App开发介绍（安卓 / iOS / 鸿蒙）
安卓
需要安装 Android Studio，用于配置 Android SDK、创建模拟器、连接真机、编译和打包应用。原生安卓由Kotlin（官方首推）/ Java 两种语言开发，即使使用 React Native 开发，还需要额外安装 Node.js、JDK，业务代码可以在 IDEA、VS Code 或 WebStorm 等工具中编写，但安卓运行和打包仍然依赖 Android Studio 提供的 SDK 和构建环境。
如果需要发布至应用商店，需要提供APP 备案信息、ICP备案证明、软件著作权证书或 APP 电子版权认证证书。
iOS
iOS开发需要使用Xcode进行编译测试，且Xcode只能安装在MacBook上，或者通过Expo EAS Build 云打包。
个人需要缴纳99$（￥688）开发者账户年费，才能正常发布App至应用商店，或者选择7天续签，但是每次得连Mac或用AltStore无线刷新。对于政府、公立学校用户可以申请免费计划。
Only Apple can do!
鸿蒙
鸿蒙端开发计划基于 React Native for OpenHarmony（RNOH） 进行适配，业务页面和通用逻辑继续使用 React Native 和 TypeScript 编写，鸿蒙端运行、调试、编译和打包则需要依赖 DevEco Studio。
开发环境主要包括 DevEco Studio、HarmonyOS SDK / OpenHarmony SDK、RNOH、Node.js、HDC 调试工具、鸿蒙模拟器或鸿蒙真机，以及用于真机调试、签名配置和应用发布的华为开发者账号。
实际开发中，普通业务页面可尽量复用 React Native 代码，但相机、文件、定位、推送、扫码、权限申请等平台能力需要单独验证 RNOH 的支持情况；如果相关第三方库暂不支持鸿蒙，则需要通过 ArkTS 编写鸿蒙原生模块后再暴露给 React Native 调用。
发布要求参考安卓端。
实战
Android Studio 配置 SDK Manager
安装时选择自定义配置，完毕后在SDK Manager里配置：
HTTP Proxy
Android SDK Location（E:/CodeConfiguration/Android/Sdk）
SDK Platforms
Android 16.0
Android 15.0
SDK Tools
Android SDK Build-Tools
Android SDK Command-line Tools (latest)
Android Emulator
Android SDK Platform-Tools
Google USB Driver
环境变量
Path变量：
E:\CodeConfiguration\Android\Sdk\platform-tools
E:\CodeConfiguration\Android\Sdk\emulator
E:\CodeConfiguration\Android\Sdk\cmdline-tools\latest\bin
添加用户变量：
ANDROID_HOME
E:\CodeConfiguration\Android\Sdk
ANDROID_SDK_ROOT
E:\CodeConfiguration\Android\Sdk
Nodejs 初始化 RN 项目
React Native 官方环境要求里提到 Node 22.11.0 或更新版本
nvm install 22.23.0
nvm use 22.23.0
npx @react-native-community/cli@latest init IPInfoManageSystem --directory android_reactNative_IPInfoManageSystem创建安卓模拟器
Android Studio 打开 Virtual Device Manager -> Create Virtual Device
选择一个手机型号：Pixel 7，系统镜像建议选：Android 15 / API 35
选择 ⭐ Google Play Intel x86_64 Atom System Image API 35，然后finish
cd E:\Code\Git\android_reactNative_IPInfoManageSystem
Set-Content -Path ".\android\local.properties" -Value "sdk.dir=E:/CodeConfiguration/Android/Sdk"先打开一个 PowerShell：
npm start然后新开一个 PowerShell：
cd E:\Code\Git\android_reactNative_IPInfoManageSystem
npm run android8081 已经有 Metro 在运行，选择去连接，选择No
显示welcome to react native说明启动成功。
在当前目录下创建业务文件夹：
mkdir src
mkdir src\pages
mkdir src\components
mkdir src\utils改名后，替换图标在android studio里进行，等待项目扫描完毕后，出现 Android 视图后，展开 app > res
右键 res 选择：New > Image Asset
USB调试
打开开发者选项 → USB 调试：开启
把 USB 连接模式改成：文件传输 / MTP
查看设备列表：
adb devicesemulator-5554 = 模拟器
xxxxxx = 真机
npm run android -- --deviceId xxxxxx 也可以直接关闭 Android Studio 模拟器窗口。
然后只剩真机后，再运行
打包
cd android
.\gradlew.bat assembleRelease位置在：android/app/build/outputs/apk/release/app-release.apk
React VS React Native
React Web：
可以用 css / scss / module.scss / styled-components
React Native：
默认用 StyleSheet.create / styles.ts
不默认支持 css / scss 导入
热更新与原生更新
JS Bundle 热更新
App 启动时检查服务器上有没有新的 JS bundle，有就下载替换本地 bundle。React Native 的页面、样式、业务逻辑大多可以这样更新。
原生更新
如果改了 Android/iOS 原生代码、原生依赖、权限、启动配置、SDK，这种不能靠 JS 热更新，必须重新发 APK/IPA。
