mobile-app-developer
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseMobile 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
状态管理与架构
| Architecture | React Native | Flutter | Best For |
|---|---|---|---|
| MVVM | MobX / Legend-State | Provider / Riverpod | Reactive UI, clean separation |
| Redux-style | Redux Toolkit / Zustand | BLoC / Cubit | Complex enterprise apps, strict flow |
| Atomic | Recoil / Jotai | Riverpod | Fine-grained updates, high performance |
| Offline-First | WatermelonDB / Realm | Hive / Isar / Drift | Apps needing robust sync |
| 架构 | React Native | Flutter | 适用场景 |
|---|---|---|---|
| MVVM | MobX / Legend-State | Provider / Riverpod | 响应式UI、清晰解耦 |
| Redux风格 | Redux Toolkit / Zustand | BLoC / Cubit | 复杂企业级应用、严格流程 |
| 原子化 | Recoil / Jotai | Riverpod | 细粒度更新、高性能 |
| 离线优先 | WatermelonDB / Realm | Hive / Isar / Drift | 需要可靠同步的应用 |
Performance Constraints
性能约束
| Metric | Target | Optimization Strategy |
|---|---|---|
| Cold Start | < 1.5s | Hermes (RN), Lazy Loading, Deferred initialization |
| Frame Rate | 60fps (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 (Native):
mobile-developer- 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:
-
Initialization (Expo)bash
npx create-expo-app@latest my-app -t default cd my-app npx expo install expo-router react-native-reanimated -
Configuration (app.json)json
{ "expo": { "newArchEnabled": true, "plugins": [ "expo-router", "expo-font", ["expo-build-properties", { "ios": { "newArchEnabled": true }, "android": { "newArchEnabled": true } }] ] } } -
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 -
Navigation Implementationtsx
// 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应用。
步骤:
-
初始化(Expo)bash
npx create-expo-app@latest my-app -t default cd my-app npx expo install expo-router react-native-reanimated -
配置(app.json)json
{ "expo": { "newArchEnabled": true, "plugins": [ "expo-router", "expo-font", ["expo-build-properties", { "ios": { "newArchEnabled": true }, "android": { "newArchEnabled": true } }] ] } } -
目录结构(基于文件的路由)
/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 -
导航实现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:
-
Replace FlatListtsx
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} /> ); }; -
Memoize List Itemstsx
const ListItem = React.memo(({ item }) => { return ( <View style={styles.item}> <Text>{item.title}</Text> </View> ); }, (prev, next) => prev.item.id === next.item.id); -
Image Optimization
- Use (uses SDWebImage/Glide native caching).
expo-image - Enable .
cachePolicy="memory-disk" - Use for smooth loading.
transition={200}
- Use
目标: 流畅渲染10000+列表项,保持60fps。
步骤:
-
替换FlatListtsx
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} /> ); }; -
记忆化列表项tsx
const ListItem = React.memo(({ item }) => { return ( <View style={styles.item}> <Text>{item.title}</Text> </View> ); }, (prev, next) => prev.item.id === next.item.id); -
图片优化
- 使用(采用SDWebImage/Glide原生缓存)
expo-image - 启用
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