页面导航

MootingAPP 的导航系统说明。

导航架构

应用使用基于状态的简单导航，而非 React Navigation：

// App.jsx
const [currentScreen, setCurrentScreen] = useState('FirstOpen');

// 页面切换
const handleGoToLogin = () => setCurrentScreen('Login');
const handleGoToHome = () => setCurrentScreen('Home');

页面流程图

┌─────────────────────────────────────────────────────────────┐
│                        认证流程                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  FirstOpen ──→ Login ──→ VerifyCode ──→ Home               │
│                                                             │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                        主要功能                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│                     Home (首页)                              │
│                         │                                   │
│           ┌─────────────┼─────────────┐                     │
│           │             │             │                     │
│           ▼             ▼             ▼                     │
│       Recording     Settings      Profile                   │
│           │             │             │                     │
│           ▼             ▼             ▼                     │
│       RecordList   子设置页      PersonalInfo               │
│           │                                                 │
│           ▼                                                 │
│       RecordDetail                                          │
│                                                             │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                       设备连接                               │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  AddDevice ──→ BluetoothAuth ──→ BluetoothScan             │
│                                       │                     │
│                                       ▼                     │
│                               ConnectSuccess ──→ Home      │
│                                                             │
└─────────────────────────────────────────────────────────────┘

导航回调

每个页面通过 props 接收导航回调：

// HomeScreen.jsx
const HomeScreen = ({
  onGoToRecording,
  onGoToSettings,
  onGoToProfile,
  onGoToRecordList,
  onGoToAddDevice,
}) => {
  return (
    <View>
      <TouchableOpacity onPress={onGoToRecording}>
        <Text>开始录音</Text>
      </TouchableOpacity>
    </View>
  );
};

App.jsx 路由配置

// App.jsx
const AppContent = () => {
  const [currentScreen, setCurrentScreen] = useState('FirstOpen');

  // 导航处理函数
  const handleGoToLogin = () => setCurrentScreen('Login');
  const handleGoToVerifyCode = () => setCurrentScreen('VerifyCode');
  const handleGoToHome = () => setCurrentScreen('Home');
  const handleGoToRecording = () => setCurrentScreen('Recording');
  // ... 更多处理函数

  // 根据状态渲染页面
  switch (currentScreen) {
    case 'FirstOpen':
      return <FirstOpenScreen onStart={handleGoToLogin} />;
    case 'Login':
      return <LoginScreen onLogin={handleGoToVerifyCode} />;
    case 'VerifyCode':
      return <VerifyCodeScreen onVerify={handleGoToHome} />;
    case 'Home':
      return (
        <HomeScreen
          onGoToRecording={handleGoToRecording}
          onGoToSettings={handleGoToSettings}
          // ...
        />
      );
    // ... 更多 case
    default:
      return <HomeScreen />;
  }
};

底部导航栏

底部导航栏提供三个主要入口：

// BottomNavBar.jsx
const tabs = [
  { key: 'records', label: '记录', icon: recordIcon },
  { key: 'voice', label: '转写', icon: voiceIcon },
  { key: 'mine', label: '我的', icon: mineIcon },
];

导航栏会根据当前状态显示不同图标（如录音中状态）。