移动端开发¶

移动端开发的 Vibe Coding 需要特别关注平台差异、原生能力调用和性能约束。

跨平台策略¶

React Native¶

背景：React Native 0.73 项目，使用 Expo SDK 50，
      导航使用 React Navigation v6，样式使用 StyleSheet API。
参考组件：[附上现有 Screen 组件]

目标：创建 OrderDetailScreen 屏幕
路由参数：{ orderId: string }
数据获取：使用现有的 useOrder(id) hook
布局：ScrollView + 固定底部操作栏

范围：创建 src/screens/OrderDetailScreen.tsx
约束：
  - 不使用第三方 UI 库
  - 适配 iOS 安全区域（SafeAreaView）
  - 支持深色模式（useColorScheme）

验收：iOS 和 Android 模拟器均正常渲染

Flutter¶

背景：Flutter 3.x 项目，状态管理使用 Riverpod，
      路由使用 GoRouter，设计系统基于 Material 3。

目标：实现商品详情页 Widget
数据：通过 productProvider(id) 获取
布局：CustomScrollView + SliverAppBar（图片展开效果）

范围：创建 lib/features/product/product_detail_page.dart
约束：
  - 遵循项目的 feature-first 目录结构
  - 图片加载使用现有的 CachedNetworkImage 封装
  - 错误状态使用现有的 ErrorWidget

验收：flutter test test/product_detail_test.dart 通过

原生能力集成¶

相机和相册¶

目标：在用户头像设置页面添加拍照/选择照片功能
平台：React Native（iOS + Android）
现有实现：[附上现有图片上传逻辑]

约束：
  - 使用 react-native-image-picker（已安装）
  - 图片上传前压缩到 1MB 以内
  - 需要处理权限拒绝的情况

验收：
  - iOS 权限弹窗正常显示
  - Android 权限请求正常
  - 图片选择后正确上传

推送通知¶

目标：集成 FCM 推送通知
平台：React Native
现有后端：[附上推送接口文档]

约束：
  - 使用 @react-native-firebase/messaging（已安装）
  - 前台/后台/killed 三种状态均需处理
  - token 刷新时自动更新后端

验收：
  - 测试设备收到推送
  - 点击推送跳转到正确页面

移动端特有的验证要求¶

验证项	iOS	Android
安全区域适配	刘海屏、底部 Home 条	状态栏、导航栏
深色模式	系统深色模式切换	系统深色模式切换
字体缩放	辅助功能字体放大	字体大小设置
网络状态	断网/弱网表现	断网/弱网表现
权限处理	首次请求/拒绝后引导	首次请求/拒绝后引导

常见陷阱¶

陷阱：忽略平台差异

在约束中明确"同时适配 iOS 和 Android"，并提供两个平台的验证步骤。

陷阱：硬编码尺寸

要求 AI 使用 Dimensions.get('window') 或 Flexbox，而不是固定像素值。

陷阱：忽略键盘遮挡

包含输入框的页面，在约束中明确要求处理键盘弹出时的布局调整。