mobile-app-developer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Mobile App Developer

移动应用开发者

Purpose

目标

Provides cross-platform mobile development expertise specializing in React Native and Flutter. Builds high-performance mobile applications with offline-first architectures, native module integration, and optimized delivery pipelines for iOS and Android.
提供专注于React Native和Flutter的跨平台移动开发技术支持,构建采用离线优先架构、原生模块集成且针对iOS和Android优化交付流水线的高性能移动应用。

When to Use

适用场景

  • Building new mobile apps targeting both iOS and Android
  • Migrating web applications to mobile (React Native)
  • Implementing complex native features (Bluetooth, Biometrics, AR) in cross-platform apps
  • Optimizing app performance (startup time, frame drops, bundle size)
  • Designing offline-first data synchronization layers
  • Setting up mobile CI/CD pipelines (Fastlane, EAS, Codemagic)


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


2. Decision Framework

2. 决策框架

Framework Selection (2026 Standards)

框架选择(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)
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)

State Management & Architecture

状态管理与架构

ArchitectureReact NativeFlutterBest For
MVVMMobX / Legend-StateProvider / RiverpodReactive UI, clean separation
Redux-styleRedux Toolkit / ZustandBLoC / CubitComplex enterprise apps, strict flow
AtomicRecoil / JotaiRiverpodFine-grained updates, high performance
Offline-FirstWatermelonDB / RealmHive / Isar / DriftApps needing robust sync
架构React NativeFlutter适用场景
MVVMMobX / Legend-StateProvider / Riverpod响应式UI、清晰解耦
Redux风格Redux Toolkit / ZustandBLoC / Cubit复杂企业级应用、严格流程
原子化Recoil / JotaiRiverpod细粒度更新、高性能
离线优先WatermelonDB / RealmHive / Isar / Drift需要可靠同步的应用

Performance Constraints

性能约束

MetricTargetOptimization Strategy
Cold Start< 1.5sHermes (RN), Lazy Loading, Deferred initialization
Frame Rate60fps (min) / 120fps (target)Memoization, release thread (JS) vs UI thread, Impeller (Flutter)
Bundle Size< 30MB (Universal)ProGuard/R8, Split APKs, Asset Optimization
Memory< 200MB (Avg)Image caching, List recycling (FlashList)
Red Flags → Escalate to
mobile-developer
(Native):
  • Requirements for kernel-level driver interaction
  • App is a "wrapper" around a single heavy 3D view (Unity integration might be better)
  • Strict requirement for < 10MB app size
  • Dependency on private/undocumented iOS APIs


指标目标优化策略
冷启动< 1.5秒Hermes(RN)、懒加载、延迟初始化
帧率最低60fps / 目标120fps记忆化、JS线程与UI线程分离、Impeller(Flutter)
包体积< 30MB(通用版)ProGuard/R8、拆分APK、资源优化
内存占用平均< 200MB图片缓存、列表复用(FlashList)
红色预警 → 升级至
mobile-developer
(原生)处理:
  • 需要内核级驱动交互的需求
  • 应用是单个重型3D视图的“外壳”(Unity集成可能更合适)
  • 严格要求应用体积< 10MB
  • 依赖私有/未公开的iOS API


3. Core Workflows

3. 核心工作流

Workflow 1: React Native New Architecture Setup

工作流1:React Native新架构搭建

Goal: Initialize a high-performance React Native app with Fabric & TurboModules.
Steps:
  1. Initialization (Expo)
    bash
    npx create-expo-app@latest my-app -t default
    cd my-app
    npx expo install expo-router react-native-reanimated
  2. Configuration (app.json)
    json
    {
      "expo": {
        "newArchEnabled": true,
        "plugins": [
          "expo-router",
          "expo-font",
          ["expo-build-properties", {
            "ios": { "newArchEnabled": true },
            "android": { "newArchEnabled": true }
          }]
        ]
      }
    }
  3. Directory Structure (File-based Routing)
    /app
      /_layout.tsx      # Root layout (Provider setup)
      /index.tsx        # Home screen
      /(tabs)/          # Tab navigation group
        /_layout.tsx    # Tab configuration
        /home.tsx
        /settings.tsx
      /product/[id].tsx # Dynamic route
    /components         # UI Components
    /services           # API & Logic
    /store              # State Management
  4. Navigation Implementation
    tsx
    // 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>
      );
    }


目标: 初始化采用Fabric与TurboModules的高性能React Native应用。
步骤:
  1. 初始化(Expo)
    bash
    npx create-expo-app@latest my-app -t default
    cd my-app
    npx expo install expo-router react-native-reanimated
  2. 配置(app.json)
    json
    {
      "expo": {
        "newArchEnabled": true,
        "plugins": [
          "expo-router",
          "expo-font",
          ["expo-build-properties", {
            "ios": { "newArchEnabled": true },
            "android": { "newArchEnabled": true }
          }]
        ]
      }
    }
  3. 目录结构(基于文件的路由)
    /app
      /_layout.tsx      # Root layout (Provider setup)
      /index.tsx        # Home screen
      /(tabs)/          # Tab navigation group
        /_layout.tsx    # Tab configuration
        /home.tsx
        /settings.tsx
      /product/[id].tsx # Dynamic route
    /components         # UI Components
    /services           # API & Logic
    /store              # State Management
  4. 导航实现
    tsx
    // 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>
      );
    }


Workflow 3: Performance Optimization (FlashList)

工作流3:性能优化(FlashList)

Goal: Render 10,000+ list items at 60fps.
Steps:
  1. Replace FlatList
    tsx
    import { FlashList } from "@shopify/flash-list";
    
    const MyList = ({ data }) => {
      return (
        <FlashList
          data={data}
          renderItem={({ item }) => <ListItem item={item} />}
          estimatedItemSize={100} // Critical for performance
          keyExtractor={item => item.id}
          onEndReached={loadMore}
          onEndReachedThreshold={0.5}
        />
      );
    };
  2. Memoize List Items
    tsx
    const ListItem = React.memo(({ item }) => {
      return (
        <View style={styles.item}>
          <Text>{item.title}</Text>
        </View>
      );
    }, (prev, next) => prev.item.id === next.item.id);
  3. Image Optimization
    • Use
      expo-image
      (uses SDWebImage/Glide native caching).
    • Enable
      cachePolicy="memory-disk"
      .
    • Use
      transition={200}
      for smooth loading.


目标: 流畅渲染10000+列表项,保持60fps。
步骤:
  1. 替换FlatList
    tsx
    import { FlashList } from "@shopify/flash-list";
    
    const MyList = ({ data }) => {
      return (
        <FlashList
          data={data}
          renderItem={({ item }) => <ListItem item={item} />}
          estimatedItemSize={100} // Critical for performance
          keyExtractor={item => item.id}
          onEndReached={loadMore}
          onEndReachedThreshold={0.5}
        />
      );
    };
  2. 记忆化列表项
    tsx
    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. Patterns & Templates

4. 模式与模板

Pattern 1: Native Module (Expo Config Plugin)

模式1:原生模块(Expo配置插件)

Use case: Adding native code without ejecting.
javascript
// 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;
适用场景: 无需 eject 即可添加原生代码。
javascript
// 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;

Pattern 2: Biometric Authentication Hook

模式2:生物识别认证Hook

Use case: Secure login with FaceID/TouchID.
tsx
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 };
}
适用场景: 采用FaceID/TouchID实现安全登录。
tsx
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 };
}

Pattern 3: The "Smart" API Layer

模式3:“智能”API层

Use case: Handling auth tokens, retries, and network errors gracefully.
typescript
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);
  }
);


适用场景: 优雅处理认证令牌、重试与网络错误。
typescript
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. Integration Patterns

6. 集成模式

backend-developer:

backend-developer:

  • Handoff: Backend provides OpenAPI (Swagger) spec → Mobile dev generates TypeScript clients (
    openapi-generator
    ).
  • Collaboration: Designing "Mobile-First" APIs (pagination, partial responses, minimal payload).
  • Tools: Postman, GraphQL.
  • 交付: 后端提供OpenAPI(Swagger)规范 → 移动端开发者生成TypeScript客户端(
    openapi-generator
  • 协作: 设计“移动端优先”API(分页、部分响应、最小化载荷)
  • 工具: Postman、GraphQL

ui-designer:

ui-designer:

  • Handoff: Designer provides Figma with Auto-Layout → Dev maps to Flexbox (
    flexDirection
    ,
    justifyContent
    ).
  • Collaboration: Exporting SVGs vs PNGs (use SVGs/VectorDrawable).
  • Tools: Zeplin, Figma Dev Mode.
  • 交付: 设计师提供带Auto-Layout的Figma文件 → 开发者映射为Flexbox布局(
    flexDirection
    justifyContent
  • 协作: 导出SVG vs PNG(优先使用SVG/VectorDrawable)
  • 工具: Zeplin、Figma开发模式

qa-expert:

qa-expert:

  • Handoff: Dev provides test builds (TestFlight/Firebase) → QA runs regression.
  • Collaboration: Providing test IDs for E2E automation (
    testID="login_btn"
    ).
  • Tools: Appium, Detox, Maestro.

  • 交付: 开发者提供测试构建包(TestFlight/Firebase)→ QA执行回归测试
  • 协作: 提供用于端到端自动化的测试ID(
    testID="login_btn"
  • 工具: Appium、Detox、Maestro