# 02-导航和布局设计

## 目标

配置 React Navigation 导航系统，实现 Tab 导航和 Stack 导航。

---

## UI 设计参考

> 参考设计稿：`files/ui/首页.png`

### 底部 Tab 导航规范

| Tab | 图标 | 文字 |
|-----|------|------|
| 首页 | 房屋图标 `home` | 首页 |
| AI问答 | 对话气泡 `chat-processing` | AI问答 |
| 体质分析 | 心电图 `chart-line-variant` | 体质分析 |
| 我的 | 用户图标 `account` | 我的 |

### Tab 样式规范

```typescript
const tabBarOptions = {
  activeTintColor: '#10B981',    // 选中颜色
  inactiveTintColor: '#9CA3AF',  // 未选中颜色
  style: {
    height: 60,
    paddingBottom: 8,
    paddingTop: 8,
    backgroundColor: '#FFFFFF',
    borderTopWidth: 1,
    borderTopColor: '#E5E7EB',
  },
  labelStyle: {
    fontSize: 12,
  },
}
```

---

## 前置要求

- 项目结构已初始化
- React Navigation 已安装
- 模拟数据服务已创建

---

## 实施步骤

### 步骤 1：创建导航类型定义

创建 `src/navigation/types.ts`：
```typescript
import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
import type { BottomTabNavigationProp } from '@react-navigation/bottom-tabs'
import type { CompositeNavigationProp, RouteProp } from '@react-navigation/native'

// Root Stack
export type RootStackParamList = {
  Auth: undefined
  Main: undefined
}

// Auth Stack
export type AuthStackParamList = {
  Login: undefined
}

// Main Tab
export type MainTabParamList = {
  HomeTab: undefined
  ChatTab: undefined
  ConstitutionTab: undefined
  ProfileTab: undefined
}

// Home Stack
export type HomeStackParamList = {
  Home: undefined
}

// Chat Stack
export type ChatStackParamList = {
  ChatList: undefined
  ChatDetail: { id: string }
}

// Constitution Stack
export type ConstitutionStackParamList = {
  ConstitutionHome: undefined
  ConstitutionQuestions: undefined
  ConstitutionResult: undefined
}

// Profile Stack
export type ProfileStackParamList = {
  ProfileHome: undefined
  HealthRecord: undefined
}

// Navigation Props
export type RootNavigationProp = NativeStackNavigationProp<RootStackParamList>

export type ChatNavigationProp = CompositeNavigationProp<
  NativeStackNavigationProp<ChatStackParamList>,
  BottomTabNavigationProp<MainTabParamList>
>

// Route Props
export type ChatDetailRouteProp = RouteProp<ChatStackParamList, 'ChatDetail'>
```

### 步骤 2：创建认证状态 Store

创建 `src/stores/useAuthStore.ts`：
```typescript
import { create } from 'zustand'
import AsyncStorage from '@react-native-async-storage/async-storage'
import { User } from '../types'

interface AuthState {
  isLoggedIn: boolean
  user: User | null
  login: (user: User) => void
  logout: () => void
}

export const useAuthStore = create<AuthState>((set) => ({
  isLoggedIn: false,
  user: null,
  
  login: (user) => {
    AsyncStorage.setItem('user', JSON.stringify(user))
    set({ isLoggedIn: true, user })
  },
  
  logout: () => {
    AsyncStorage.removeItem('user')
    set({ isLoggedIn: false, user: null })
  },
}))
```

### 步骤 3：创建主 Tab 导航

创建 `src/navigation/MainTabNavigator.tsx`：
```typescript
import React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import type { MainTabParamList } from './types'
import HomeNavigator from './HomeNavigator'
import ChatNavigator from './ChatNavigator'
import ConstitutionNavigator from './ConstitutionNavigator'
import ProfileNavigator from './ProfileNavigator'

const Tab = createBottomTabNavigator<MainTabParamList>()

const MainTabNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: '#10B981',
        tabBarInactiveTintColor: '#9CA3AF',
        tabBarStyle: {
          height: 60,
          paddingBottom: 8,
          paddingTop: 8,
        },
        tabBarLabelStyle: {
          fontSize: 12,
        },
      }}
    >
      <Tab.Screen
        name="HomeTab"
        component={HomeNavigator}
        options={{
          tabBarLabel: '首页',
          tabBarIcon: ({ color, size }) => (
            <Icon name="home" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="ChatTab"
        component={ChatNavigator}
        options={{
          tabBarLabel: 'AI问答',
          tabBarIcon: ({ color, size }) => (
            <Icon name="chat-processing" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="ConstitutionTab"
        component={ConstitutionNavigator}
        options={{
          tabBarLabel: '体质分析',
          tabBarIcon: ({ color, size }) => (
            <Icon name="chart-line-variant" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="ProfileTab"
        component={ProfileNavigator}
        options={{
          tabBarLabel: '我的',
          tabBarIcon: ({ color, size }) => (
            <Icon name="account" size={size} color={color} />
          ),
        }}
      />
    </Tab.Navigator>
  )
}

export default MainTabNavigator
```

### 步骤 4：创建子导航器

创建 `src/navigation/HomeNavigator.tsx`：
```typescript
import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import type { HomeStackParamList } from './types'
import HomeScreen from '../screens/home/HomeScreen'

const Stack = createNativeStackNavigator<HomeStackParamList>()

const HomeNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ 
          title: '健康AI助手',
          headerStyle: { backgroundColor: '#10B981' },
          headerTintColor: '#fff',
        }}
      />
    </Stack.Navigator>
  )
}

export default HomeNavigator
```

创建 `src/navigation/ChatNavigator.tsx`：
```typescript
import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import type { ChatStackParamList } from './types'
import ChatListScreen from '../screens/chat/ChatListScreen'
import ChatDetailScreen from '../screens/chat/ChatDetailScreen'

const Stack = createNativeStackNavigator<ChatStackParamList>()

const ChatNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: '#10B981' },
        headerTintColor: '#fff',
      }}
    >
      <Stack.Screen
        name="ChatList"
        component={ChatListScreen}
        options={{ title: 'AI问答' }}
      />
      <Stack.Screen
        name="ChatDetail"
        component={ChatDetailScreen}
        options={{ title: '健康咨询' }}
      />
    </Stack.Navigator>
  )
}

export default ChatNavigator
```

创建 `src/navigation/ConstitutionNavigator.tsx`：
```typescript
import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import type { ConstitutionStackParamList } from './types'
import ConstitutionHomeScreen from '../screens/constitution/ConstitutionHomeScreen'
import ConstitutionQuestionsScreen from '../screens/constitution/ConstitutionQuestionsScreen'
import ConstitutionResultScreen from '../screens/constitution/ConstitutionResultScreen'

const Stack = createNativeStackNavigator<ConstitutionStackParamList>()

const ConstitutionNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: '#10B981' },
        headerTintColor: '#fff',
      }}
    >
      <Stack.Screen
        name="ConstitutionHome"
        component={ConstitutionHomeScreen}
        options={{ title: '体质分析' }}
      />
      <Stack.Screen
        name="ConstitutionQuestions"
        component={ConstitutionQuestionsScreen}
        options={{ title: '体质问卷' }}
      />
      <Stack.Screen
        name="ConstitutionResult"
        component={ConstitutionResultScreen}
        options={{ title: '测评结果' }}
      />
    </Stack.Navigator>
  )
}

export default ConstitutionNavigator
```

创建 `src/navigation/ProfileNavigator.tsx`：
```typescript
import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import type { ProfileStackParamList } from './types'
import ProfileHomeScreen from '../screens/profile/ProfileHomeScreen'
import HealthRecordScreen from '../screens/profile/HealthRecordScreen'

const Stack = createNativeStackNavigator<ProfileStackParamList>()

const ProfileNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: '#10B981' },
        headerTintColor: '#fff',
      }}
    >
      <Stack.Screen
        name="ProfileHome"
        component={ProfileHomeScreen}
        options={{ title: '我的' }}
      />
      <Stack.Screen
        name="HealthRecord"
        component={HealthRecordScreen}
        options={{ title: '健康档案' }}
      />
    </Stack.Navigator>
  )
}

export default ProfileNavigator
```

### 步骤 5：创建根导航器

创建 `src/navigation/RootNavigator.tsx`：
```typescript
import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { useAuthStore } from '../stores/useAuthStore'
import type { RootStackParamList } from './types'
import LoginScreen from '../screens/auth/LoginScreen'
import MainTabNavigator from './MainTabNavigator'

const Stack = createNativeStackNavigator<RootStackParamList>()

const RootNavigator = () => {
  const { isLoggedIn } = useAuthStore()

  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      {!isLoggedIn ? (
        <Stack.Screen name="Auth" component={LoginScreen} />
      ) : (
        <Stack.Screen name="Main" component={MainTabNavigator} />
      )}
    </Stack.Navigator>
  )
}

export default RootNavigator
```

### 步骤 6：更新 App.tsx

```typescript
import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { PaperProvider } from 'react-native-paper'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import RootNavigator from './src/navigation/RootNavigator'
import { theme } from './src/theme'

const App = () => {
  return (
    <SafeAreaProvider>
      <PaperProvider theme={theme}>
        <NavigationContainer>
          <RootNavigator />
        </NavigationContainer>
      </PaperProvider>
    </SafeAreaProvider>
  )
}

export default App
```

---

## 导航结构

```
RootNavigator
├── LoginScreen（未登录）
└── MainTabNavigator（已登录）
    ├── HomeTab
    │   └── Home
    ├── ChatTab
    │   ├── ChatList
    │   └── ChatDetail
    ├── ConstitutionTab
    │   ├── ConstitutionHome
    │   ├── ConstitutionQuestions
    │   └── ConstitutionResult
    └── ProfileTab
        ├── ProfileHome
        └── HealthRecord
```

---

## 需要创建的文件清单

| 文件路径 | 说明 |
|----------|------|
| `src/navigation/types.ts` | 导航类型定义 |
| `src/stores/useAuthStore.ts` | 认证状态 |
| `src/navigation/RootNavigator.tsx` | 根导航 |
| `src/navigation/MainTabNavigator.tsx` | Tab 导航 |
| `src/navigation/HomeNavigator.tsx` | 首页导航 |
| `src/navigation/ChatNavigator.tsx` | 对话导航 |
| `src/navigation/ConstitutionNavigator.tsx` | 体质导航 |
| `src/navigation/ProfileNavigator.tsx` | 个人导航 |

---

## 验收标准

- [ ] 导航结构配置正确
- [ ] Tab 导航显示正常
- [ ] Stack 导航跳转正常
- [ ] 登录状态切换导航正常

---

## 预计耗时

30-40 分钟

---

## 下一步

完成后进入 `02-APP原型开发/03-登录页面.md`