1. 技术方案核心目标

• 一句话总结：
  “基于React Native构建跨平台App，技术栈统一、高性能、易扩展。”

• 关键指标：

  • 首屏加载时间 ≤1s

  • Android/iOS代码复用率 ≥85%

2. 技术栈与工具链

核心框架与库

开发工具链

• 代码规范：ESLint（Airbnb规则）+ Prettier + Husky（Git钩子）

• 调试工具：Flipper（集成Redux/网络日志）、React Native Debugger

• 构建工具：Fastlane（自动化打包）、GitHub Actions（CI/CD）

3. 架构设计（核心！）

分层架构

src/
├── app/                  # Redux store、根配置
├── features/             # 功能模块（按业务划分）
│   ├── auth/             # 认证模块
│   │   ├── api/          # API请求
│   │   ├── components/   # 纯UI组件
│   │   └── slice.ts      # Redux状态
├── lib/                  # 通用工具（HTTP客户端、日志等）
├── test/                 # 测试代码
└── types/                # 全局类型定义

关键设计决策

1. 状态管理：

   • 全局状态用Redux Toolkit，局部状态用useState/Context。

   • API请求统一通过RTK Query管理缓存。

2. 跨平台兼容：

   • 共用组件优先，平台差异通过Platform.select或.ios/.android.tsx后缀区分。

3. 性能优化：

   • 图片：react-native-fast-image + WebP格式

   • 列表：FlatList + getItemLayout优化滚动性能。

4. 开发流程规范

代码协作

• 分支策略：Git Flow（main保护分支，功能分支命名feat/xxx）

• Commit规范：Angular风格（feat: 添加登录功能、fix: 修复支付按钮闪退）

5. 关键技术实现示例

API请求封装

// features/auth/api/authAPI.ts
import { createApi } from '@reduxjs/toolkit/query/react';
import axiosBaseQuery from '@/lib/axiosBaseQuery';

export const authApi = createApi({
  reducerPath: 'authApi',
  baseQuery: axiosBaseQuery(),
  endpoints: (builder) => ({
    login: builder.mutation({
      query: (credentials) => ({
        url: '/login',
        method: 'POST',
        data: credentials,
      }),
    }),
  }),
});

平台特定组件适配

// components/Button/index.tsx
import { Platform } from 'react-native';
import AndroidButton from './AndroidButton';
import IosButton from './IosButton';

export default Platform.OS === 'android' ? AndroidButton : IosButton;

6. 风险与应对（开发视角）

7. 附录（开发资源）

• 文档链接：

  • React Native开发指南

  • Redux Toolkit最佳实践

• 设计资源：Figma链接（标注尺寸/颜色变量）()

• API文档：Swagger地址（需内网访问）

给开发团队方案的写作技巧

1. 明确接口定义：

   • 示例：POST /api/login 请求字段：{ email: string, password: string }

2. 提供代码片段：

   • 关键逻辑直接写示例代码（如Redux的slice结构）。

3. 标注负责人：

   • 复杂模块指定Owner（如“支付模块由后端团队王工对接”）。