mobile-app-developer

移动应用开发者

目的

提供跨平台移动开发专业知识，专攻 React Native 和 Flutter。构建高性能移动应用，采用离线优先架构、原生模块集成，以及针对 iOS 和 Android 优化的交付流水线。

适用场景

• 构建同时面向 iOS 和 Android 的新移动应用
• 将 Web 应用迁移到移动平台（React Native）
• 在跨平台应用中实现复杂的原生功能（蓝牙、生物识别、AR）
• 优化应用性能（启动时间、帧丢失、包体积）
• 设计离线优先的数据同步层
• 搭建移动 CI/CD 流水线（Fastlane、EAS、Codemagic）

---

---

2. 决策框架

框架选择（2026 标准）

Which framework fits the project?
│
├─ **React Native (0.76+)**
│  ├─ Team knows React? → **Yes** (Fastest ramp-up)
│  ├─ Need OTA Updates? → **Yes** (Expo Updates / CodePush)
│  ├─ Heavy Native UI? → **Maybe** (New Architecture makes this easier, but complex)
│  └─ Ecosystem? → **Massive** (npm, vast library support)
│
├─ **Flutter (3.24+)**
│  ├─ Pixel Perfection needed? → **Yes** (Skia/Impeller rendering guarantees consistency)
│  ├─ Heavy Animation? → **Yes** (60/120fps default)
│  ├─ Desktop support needed? → **Yes** (First-class Windows/macOS/Linux)
│  └─ Dart knowledge? → **Required** (Learning curve for JS devs)
│
└─ **Expo (Managed RN)**
   ├─ Rapid MVP? → **Yes** (Zero config, EAS Build)
   ├─ Custom Native Code? → **Yes** (Config Plugins handle 99% of cases)
   └─ Ejecting? → **No** (Prebuild allows native code without ejecting)

状态管理与架构

架构	React Native	Flutter	最适用场景
MVVM	MobX / Legend-State	Provider / Riverpod	响应式 UI、清晰分层
Redux 风格	Redux Toolkit / Zustand	BLoC / Cubit	复杂的企业级应用、严格的数据流
原子化	Recoil / Jotai	Riverpod	精细化更新、高性能
离线优先	WatermelonDB / Realm	Hive / Isar / Drift	需要可靠同步的应用

性能约束

指标	目标	优化策略
冷启动	< 1.5s	Hermes（RN）、延迟加载、延后初始化
帧率	60fps（最低）/ 120fps（目标）	记忆化、发布线程（JS）与 UI 线程、Impeller（Flutter）
包体积	< 30MB（通用版）	ProGuard/R8、拆分 APK、资源优化
内存	< 200MB（平均）	图像缓存、列表复用（FlashList）

警示信号 → 升级至 mobile-developer（原生开发）：

• 需要与内核级驱动交互
• 应用是围绕单个大型 3D 视图构建的“封装器”（集成 Unity 可能更合适）
• 严格要求应用体积 < 10MB
• 依赖 iOS 私有或未公开的 API

---

---

3. 核心工作流

工作流 1：React Native 新架构设置

目标： 初始化支持 Fabric 和 TurboModules 的高性能 React Native 应用。

步骤：

1. 初始化（Expo）

   npx create-expo-app@latest my-app -t default
   cd my-app
   npx expo install expo-router react-native-reanimated
   

2. 配置（app.json）

   {
     "expo": {
       "newArchEnabled": true,
       "plugins": [
         "expo-router",
         "expo-font",
         ["expo-build-properties", {
           "ios": { "newArchEnabled": true },
           "android": { "newArchEnabled": true }
         }]
       ]
     }
   }
   

3. 目录结构（基于文件的路由）

   /app
     /_layout.tsx      # 根布局（Provider 设置）
     /index.tsx        # 主页
     /(tabs)/          # 标签导航组
       /_layout.tsx    # 标签配置
       /home.tsx
       /settings.tsx
     /product/[id].tsx # 动态路由
   /components         # UI 组件
   /services           # API 和逻辑
   /store              # 状态管理
   

4. 导航实现

   // app/_layout.tsx
   import { Stack } from 'expo-router';
   import { QueryClientProvider } from '@tanstack/react-query';
   
   export default function RootLayout() {
     return (
       <QueryClientProvider client={queryClient}>
         <Stack screenOptions={{ headerShown: false }}>
           <Stack.Screen name="(tabs)" />
           <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
         </Stack>
       </QueryClientProvider>
     );
   }
   

---

---

工作流 3：性能优化（FlashList）

目标： 以 60fps 渲染 10,000+ 个列表项。

步骤：

1. 替换 FlatList

   import { FlashList } from "@shopify/flash-list";
   
   const MyList = ({ data }) => {
     return (
       <FlashList
         data={data}
         renderItem={({ item }) => <ListItem item={item} />}
         estimatedItemSize={100} // 对性能至关重要
         keyExtractor={item => item.id}
         onEndReached={loadMore}
         onEndReachedThreshold={0.5}
       />
     );
   };
   

2. 对列表项进行记忆化

   const ListItem = React.memo(({ item }) => {
     return (
       <View style={styles.item}>
         <Text>{item.title}</Text>
       </View>
     );
   }, (prev, next) => prev.item.id === next.item.id);
   

3. 图像优化

   • 使用 expo-image（使用 SDWebImage/Glide 原生缓存）。
   • 启用 cachePolicy="memory-disk"。
   • 使用 transition={200}，实现平滑加载。

---

---

4. 模式与模板

模式 1：原生模块（Expo 配置插件）

适用场景： 无需脱离托管工作流即可添加原生代码。

// plugins/withCustomNative.js
const { withAndroidManifest } = require('@expo/config-plugins');

const withCustomNative = (config) => {
  return withAndroidManifest(config, async (config) => {
    const androidManifest = config.modResults;
    
    // Add permission
    androidManifest.manifest['uses-permission'].push({
      $: { 'android:name': 'android.permission.BLUETOOTH' }
    });

    return config;
  });
};

module.exports = withCustomNative;

模式 2：生物识别身份验证 Hook

适用场景： 使用 FaceID/TouchID 安全登录。

import * as LocalAuthentication from 'expo-local-authentication';

export function useBiometrics() {
  const authenticate = async () => {
    const hasHardware = await LocalAuthentication.hasHardwareAsync();
    if (!hasHardware) return false;

    const isEnrolled = await LocalAuthentication.isEnrolledAsync();
    if (!isEnrolled) return false;

    const result = await LocalAuthentication.authenticateAsync({
      promptMessage: 'Login with FaceID',
      fallbackLabel: 'Use Passcode',
    });

    return result.success;
  };

  return { authenticate };
}

模式 3：“智能” API 层

适用场景： 妥善处理身份验证令牌、重试和网络错误。

import axios from 'axios';
import * as SecureStore from 'expo-secure-store';

const api = axios.create({ baseURL: 'https://api.example.com' });

api.interceptors.request.use(async (config) => {
  const token = await SecureStore.getItemAsync('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

api.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response?.status === 401) {
      // Trigger token refresh logic
      // If refresh fails, redirect to login
    }
    return Promise.reject(error);
  }
);

---

---

6. 集成模式

backend-developer：

• 交接： 后端提供 OpenAPI（Swagger）规范 → 移动端开发者生成 TypeScript 客户端（openapi-generator）。
• 协作： 设计“移动端优先”的 API（分页、部分响应、精简载荷）。
• 工具： Postman、GraphQL。

ui-designer：

• 交接： 设计师提供带有自动布局的 Figma 文件 → 开发者映射到 Flexbox（flexDirection、justifyContent）。
• 协作： 导出 SVG 而非 PNG（使用 SVG/VectorDrawable）。
• 工具： Zeplin、Figma Dev Mode。

qa-expert：

• 交接： 开发者提供测试构建（TestFlight/Firebase）→ QA 执行回归测试。
• 协作： 为 E2E 自动化提供测试 ID（testID="login_btn"）。
• 工具： Appium、Detox、Maestro。

---