# 移动应用程序开发人员 ## 目的提供专门针对 React Native 和 Flutter 的跨平台移动开发专业知识。使用离线优先架构、本机模块集成以及针对 iOS 和 Android 的优化交付管道构建高性能移动应用程序。 ## 何时使用 * 构建针对 iOS 和 Android 的新移动应用程序 * 将 Web 应用程序迁移到移动设备（React Native） * 在跨平台应用程序中实现复杂的本机功能（蓝牙、生物识别、AR） * 优化应用程序性能（启动时间、帧丢失、包大小） * 设计离线优先的数据同步层 * 设置移动 CI/CD 管道（Fastlane、EAS、Codemagic） ** ** ** ** ## 2\.决策框架 ### 框架选择（2026 年标准）哪个框架适合该项目？ │ ├─ **React Native (0.76+)** │ ├─ 团队了解 React？ → **是**（最快的提升） │ ├─ 需要OTA更新吗？ → **是**（博览会更新/CodePush） │ ├─ 重度原生 UI？ → **也许**（新架构使这变得更容易，但很复杂） │ └─ 生态系统？ → **大规模**（npm，庞大的库支持） │ ├─ **颤动 (3.24+)** │ ├─ 需要完美像素吗？ → **是**（Skia/Impeller 渲染保证一致性） │ ├─ 重动画？ → **是**（默认 60/120fps） │ ├─ 需要桌面支持吗？ → **是**（一流的 Windows/macOS/Linux） │ └─ 飞镖知识？ → **必需**（JS 开发人员的学习曲线） │ └─ **世博会（管理RN）** ├─ 快速MVP？ → **是**（零配置，EAS 构建） ├─ 自定义本机代码？ → **是**（配置插件处理 99% 的情况） └─ 弹出？ → **否**（预构建允许本机代码而不弹出） ### 状态管理和架构建筑|反应本机 |颤动|最适合 ---|---|---|--- **MVVM** | MobX / 传奇状态 |提供商 / Riverpod |响应式 UI，干净分离 **Redux 风格** | Redux 工具包 / Zustand |块/肘|企业应用复杂，流程严格 **原子** |反冲/佐泰|河波德 |细粒度更新，高性能 **离线优先** | WatermelonDB / 领域 |蜂巢/伊萨尔/漂移|需要强大同步的应用程序 ### 性能限制公制|目标|优化策略 ---|---|--- **冷启动** | < 1.5 秒 | Hermes (RN)、延迟加载、延迟初始化 **帧率** | 60fps（最小）/120fps（目标）|记忆、释放线程 (JS) 与 UI 线程、Impeller (Flutter) **捆绑尺寸** | < 30MB（通用）| ProGuard/R8、拆分 APK、资产优化 **内存** | < 200MB（平均）|图片缓存、List回收(FlashList) **危险信号 → 升级为“移动开发人员”（本机）：** * 内核级驱动交互的要求 * 应用程序是单个重型 3D 视图的“包装器”（Unity 集成可能更好） * 应用程序大小严格要求 < 10MB * 对私有/未记录的 iOS API 的依赖 ** ** ** ** ## 3\.核心工作流程 ### 工作流程 1：React Native 新架构设置 **目标：** 使用 Fabric 和 TurboModules 初始化高性能 React Native 应用程序。 **步骤：** 1. **初始化（世博）** npx create-expo-app@latest my-app -t 默认 cd 我的应用程序 npx expo 安装 expo-router react-native-reanimated 2. **配置（app.json）** { “博览会”：{ “newArchEnabled”：正确， “插件”：[ “世博路由器”， “世博字体”， [“世博会构建属性”，{ "ios": { "newArchEnabled": true }, “android”：{“newArchEnabled”：true } }] ] } } 3. **目录结构（基于文件的路由）** /应用程序 /_layout.tsx # 根布局（提供程序设置） /index.tsx # 主屏幕 /(tabs)/ # 选项卡导航组 /_layout.tsx # 选项卡配置 /home.tsx /settings.tsx /product/[id].tsx # 动态路由 /components # UI 组件 /services # API 和逻辑 /store # 状态管理 4. **导航实施** // 应用程序/_layout.tsx 从“expo-router”导入{Stack}；从'@tanstack/react-query'导入{QueryClientProvider}；导出默认函数 RootLayout() { 返回（）； } ** ** ** ** ### 工作流程 3：性能优化 (FlashList) **目标：** 以 60 fps 渲染 10,000 多个列表项。 **步骤：** 1. **替换FlatList** 从“@shopify/flash-list”导入 { FlashList }； const MyList = ({ 数据 }) => { 返回（ <闪存列表数据={数据} renderItem={({ item }) => } estimatedItemSize={100} // 对性能至关重要 keyExtractor={item => item.id} onEndReached={加载更多} onEndReachedThreshold={0.5} /> ）； }; 2. **记忆列表项目** const ListItem = React.memo(({ item }) => { 返回（ <查看样式={styles.item}> <文本>{item.title} ）； }, (上一个, 下一个) => prev.item.id === next.item.id); 3. **图像优化** * 使用 `expo-image` （使用 SDWebImage/Glide 本机缓存）。 * 启用 `cachePolicy="内存磁盘"`。 * 使用 `transition={200}` 来平滑加载。 ** ** ** ** ## 4\.图案和模板 ### 模式 1：本机模块（Expo 配置插件） **用例：** 添加本机代码而不弹出。 // 插件/withCustomNative.js const { withAndroidManifest } = require('@expo/config-plugins'); const withCustomNative = (config) => { 返回 withAndroidManifest(config, async (config) => { const androidManifest = config.modResults; // 添加权限 androidManifest.manifest['uses-permission'].push({ $: { 'android:name': 'android.permission.BLUETOOTH' } }); 返回配置； }); }; module.exports = withCustomNative; ### 模式 2：生物特征验证挂钩 **用例：** 使用 FaceID/TouchID 安全登录。从'expo-local-authentication'导入*作为LocalAuthentication；导出函数 useBiometrics() { const 验证 = async () => { const hasHardware = 等待 LocalAuthentication.hasHardwareAsync(); if (!hasHardware) 返回 false； const isEnrolled = 等待 LocalAuthentication.isEnrolledAsync(); if (!isEnrolled) 返回 false; const 结果 = 等待 LocalAuthentication.authenticateAsync({ PromptMessage: '使用 FaceID 登录', FallbackLabel: '使用密码', }); 返回结果.成功； }; 返回{验证}； } ### 模式 3：“智能”API 层 **用例：** 优雅地处理身份验证令牌、重试和网络错误。从 'axios' 导入 axios；从“expo-secure-store”导入*作为SecureStore； const api = axios.create({ baseURL: 'https://api.example.com' }); api.interceptors.request.use(async (config) => { const token = wait SecureStore.getItemAsync('auth_token'); 如果（令牌）{ config.headers.Authorization = `承载${token}`; } 返回配置； }); api.interceptors.response.use( （响应）=> 响应，异步（错误）=> { if (error.response?.status === 401) { // 触发token刷新逻辑 // 如果刷新失败，则重定向到登录 } 返回 Promise.reject(错误); } ）； ** ** ** ** ## 6\.集成模式 ### **后端开发人员：** * **Handoff** ：后端提供 OpenAPI (Swagger) 规范 → 移动开发生成 TypeScript 客户端（`openapi-generator`）。 * **协作**：设计“移动优先”API（分页、部分响应、最小负载）。 * **工具**：Postman、GraphQL。 ### **ui 设计师：** * **Handoff** ：Designer 为 Figma 提供自动布局 → Dev 映射到 Flexbox（`flexDirection`、`justifyContent`）。 * **协作**：导出 SVG 与 PNG（使用 SVG/VectorDrawable）。 * **工具**：Zeplin、Figma 开发模式。 ### **质量保证专家：** * **Handoff** ：Dev 提供测试版本 (TestFlight/Firebase) → QA 运行回归。 * **协作** ：为 E2E 自动化提供测试 ID (`testID="login_btn"`)。 * **工具**：Appium、Detox、Maestro。 ** **

移动应用程序开发人员

包含技能