react-native-architecture

React Native 架构

适用于使用 Expo 进行 React Native 开发的生产级模式，包括导航、状态管理、原生模块和离线优先架构。

何时使用本技能

• 启动新的 React Native 或 Expo 项目
• 实现复杂的导航模式
• 集成原生模块和平台 API
• 构建离线优先的移动应用
• 优化 React Native 性能
• 为移动端发布设置 CI/CD

核心概念

1. 项目结构

src/
├── app/                    # Expo Router screens
│   ├── (auth)/            # Auth group
│   ├── (tabs)/            # Tab navigation
│   └── _layout.tsx        # Root layout
├── components/
│   ├── ui/                # Reusable UI components
│   └── features/          # Feature-specific components
├── hooks/                 # Custom hooks
├── services/              # API and native services
├── stores/                # State management
├── utils/                 # Utilities
└── types/                 # TypeScript types

2. Expo 与 Bare React Native

特性	Expo	Bare RN
设置复杂度	低	高
原生模块	EAS Build	手动链接
OTA 更新	内置	手动设置
构建服务	EAS	自定义 CI
自定义原生代码	Config plugins	直接访问

快速开始

# Create new Expo project
npx create-expo-app@latest my-app -t expo-template-blank-typescript

# Install essential dependencies
npx expo install expo-router expo-status-bar react-native-safe-area-context
npx expo install @react-native-async-storage/async-storage
npx expo install expo-secure-store expo-haptics

// app/_layout.tsx
import { Stack } from 'expo-router'
import { ThemeProvider } from '@/providers/ThemeProvider'
import { QueryProvider } from '@/providers/QueryProvider'

export default function RootLayout() {
  return (
    <QueryProvider>
      <ThemeProvider>
        <Stack screenOptions={{ headerShown: false }}>
          <Stack.Screen name="(tabs)" />
          <Stack.Screen name="(auth)" />
          <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
        </Stack>
      </ThemeProvider>
    </QueryProvider>
  )
}

详细模式与完整示例

详细的模式文档位于 references/details.md。当上述导航层级不够用时，请阅读该文件。

最佳实践

推荐做法

• 使用 Expo - 更快的开发、OTA 更新、托管的原生代码
• 用 FlashList 替代 FlatList - 长列表性能更佳
• 记忆化组件 - 防止不必要的重新渲染
• 使用 Reanimated - 在原生线程上实现 60fps 动画
• 在真机上测试 - 模拟器会遗漏真实环境中的问题

避免做法

• 不要使用内联样式 - 使用 StyleSheet.create 以提升性能
• 不要在渲染中获取数据 - 使用 useEffect 或 React Query
• 不要忽视平台差异 - 在 iOS 和 Android 上都进行测试
• 不要在代码中存储密钥 - 使用环境变量
• 不要跳过错误边界 - 移动端崩溃的代价很严重