React Native产品代码

以下是 **React Native 产品级代码的典型架构和关键模块示例**，涵盖核心功能、最佳实践及常用技术栈：

---

### **1. 项目目录结构（模块化设计）**
```bash
src/
├── assets/            # 静态资源
│   ├── fonts/         # 字体文件
│   └── images/        # 图片（按分辨率分 drawable-hdpi 等）
│
├── components/        # 通用组件（按钮、卡片等）
│   └── Button/
│       ├── index.tsx
│       └── styles.ts
│
├── navigation/        # 导航配置（React Navigation）
│   ├── AppNavigator.tsx
│   └── BottomTabNavigator.tsx
│
├── screens/           # 页面组件
│   └── HomeScreen/
│       ├── index.tsx
│       └── styles.ts
│
├── services/          # 服务层（API、工具）
│   ├── api/
│   │   ├── auth.ts    # 认证接口
│   │   └── products.ts# 产品接口
│   └── storage.ts     # 本地存储（AsyncStorage封装）
│
├── store/             # 状态管理（Redux Toolkit）
│   ├── slices/        # Redux切片
│   │   └── userSlice.ts
│   └── store.ts
│
├── theme/             # 主题与样式
│   ├── colors.ts
│   └── typography.ts
│
├── utils/             # 工具函数
│   ├── helpers.ts
│   └── validation.ts
│
├── App.tsx            # 入口组件
└── config.ts          # 环境变量配置
```

---

### **2. 核心代码示例**
#### **(1) 导航配置（React Navigation）**
```tsx
// navigation/AppNavigator.tsx
import { createNativeStackNavigator } from '@react-navigation/native-stack&#