以下是 **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';
import HomeScreen from '../screens/HomeScreen';
import ProductDetailScreen from '../screens/ProductDetailScreen';
const Stack = createNativeStackNavigator();
const AppNavigator = () => {
return (
);
};
export default AppNavigator;
```
#### **(2) Redux状态管理（Redux Toolkit）**
```typescript
// store/slices/userSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
interface UserState {
token: string | null;
profile: {
id: string;
name: string;
} | null;
}
const initialState: UserState = {
token: null,
profile: null,
};
const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
login: (state, action: PayloadAction<{ token: string profile: userstateprofile>) => {
state.token = action.payload.token;
state.profile = action.payload.profile;
},
logout: (state) => {
state.token = null;
state.profile = null;
},
},
});
export const { login, logout } = userSlice.actions;
export default userSlice.reducer;
```
#### **(3) API服务层（Axios封装）**
```typescript
// services/api/products.ts
import axios from 'axios';
import { Product } from '../../types';
const API_BASE_URL = 'https://api.example.com';
export const fetchProducts = async (categoryId: string): Promise
try {
const response = await axios.get(`${API_BASE_URL}/products`, {
params: { categoryId },
headers: { Authorization: `Bearer ${store.getState().user.token}` },
});
return response.data;
} catch (error) {
throw new Error('Failed to fetch products');
}
};
```
#### **(4) 页面组件（Hooks + TypeScript）**
```tsx
// screens/HomeScreen/index.tsx
import React, { useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { fetchProducts } from '../../services/api/products';
import ProductCard from '../../components/ProductCard';
import styles from './styles';
const HomeScreen = () => {
const dispatch = useDispatch();
const products = useSelector((state) => state.products.items);
const isLoading = useSelector((state) => state.products.loading);
useEffect(() => {
dispatch(fetchProducts('electronics'));
}, [dispatch]);
return (
{isLoading ? (
) : (
<FlatList
data={products}
renderItem={({ item }) =>
keyExtractor={(item) => item.id}
/>
)}
);
};
export default HomeScreen;
```
---
### **3. 关键技术栈**
| 类别 | 推荐工具/库 | 作用 |
|------------------|----------------------------|-------------------------------|
| **导航** | React Navigation | 页面跳转与路由管理 |
| **状态管理** | Redux Toolkit | 全局状态管理 |
| **网络请求** | Axios | HTTP请求库 |
| **样式** | Styled Components / CSS-in-JS | 组件级样式隔离 |
| **类型检查** | TypeScript | 静态类型安全 |
| **代码规范** | ESLint + Prettier | 代码质量与格式统一 |
| **测试** | Jest + React Testing Library | 单元测试与组件测试 |
---
### **4. 产品级代码规范**
1. **严格类型定义**
- 使用TypeScript定义组件Props、API响应类型：
```typescript
// types/product.ts
export type Product = {
id: string;
name: string;
price: number;
description?: string;
};
```
2. **环境变量管理**
- 使用`react-native-config`区分开发/生产环境：
```env
# .env
API_URL=https://dev.api.example.com
```
3. **性能优化**
- 使用`React.memo`优化组件渲染：
```tsx
const ProductCard = React.memo(({ product }: { product: Product }) => {
return
});
```
4. **错误边界**
- 添加全局错误捕获组件：
```tsx
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
render() {
return this.state.hasError ?
}
}
```
---
### **5. 调试与部署**
- **调试工具**：React Native Debugger、Flipper
- **热更新**：CodePush（微软热更新服务）
- **CI/CD**：GitHub Actions + Fastlane（自动化构建与发布）
---
**注意事项**：
- 避免在组件中直接编写业务逻辑，遵循「容器-展示组件」分离原则
- 使用`useCallback`/`useMemo`减少不必要的计算
- 优先使用Functional Component + Hooks模式
以上代码和架构可根据具体需求调整，核心目标是保证 **可维护性** 和 **可扩展性**。
