Okul.com.tr — Eğitim Ekosistemi

OkulUp Navigation Architecture

2 dakika okuma süresi

Proje: OkulUp · Hub: OkulUp — Architecture

Navigation Architecture

Yapı

OkulUp iki katmanlı navigasyon kullanıyor:

1. Expo Router (File-Based)

app/
├── _layout.tsx          # Root layout — provider'lar + Stack
├── index.tsx            # Redirect: auth varsa /home, yoksa /login
├── (auth)/              # Auth flow (login, register, consent, forgot-password)
├── (tabs)/              # Ana tab ekranları
│   ├── _layout.tsx      # TabBar inject eden custom layout
│   ├── home.tsx
│   ├── announcements.tsx
│   ├── messages.tsx
│   ├── notifications.tsx
│   ├── profile.tsx
│   ├── calendar.tsx
│   ├── payments.tsx
│   ├── tracking.tsx
│   ├── reports.tsx
│   ├── assignments.tsx
│   ├── meal-menus.tsx
│   └── ...
├── (admin)/             # Admin-only ekranlar (users CRUD)
├── announcement/[id].tsx
├── meal-menu/[id].tsx
├── chat/[id].tsx
├── settings/
└── ...

2. Custom TabBar

(tabs)/_layout.tsx içinde TabBar bileşeni kullanılıyor — Expo’nun default tab navigator yok.

TabBar dinamik: getTabItems(context) fonksiyonu kullanıcı rolüne ve mobileConfig’e göre gösterilecek tab’ları belirliyor. Her oturumda tab yapısı değişebilir.

Tab sırası:

  1. Home (her zaman)
  2. Announcements (view permission varsa)
  3. Messages veya QuickAccess (role’e göre)
  4. QuickAccess (role’e göre: admin→reports, teacher→attendance, parent→tracking, student→assignments)
  5. Profile (her zaman)

3. Custom Drawer

Expo Router Drawer kullanılmıyor. Tamamen custom Drawer.tsx:

  • DrawerProvider + DrawerContext ile açma/kapama state’i
  • Genişlik: SCREEN_WIDTH * 0.78
  • Animasyon: react-native-reanimated ile sliding
  • Drawer’da navigation item’ları getDrawerItems(context) ile belirleniyor
  • Drawer’daki item’lar surfaces: ['drawer'] olanlar

Her navigation item’ın surfaces alanı var: 'tab' | 'drawer'.

  • Bir item hem tab hem drawer’da görünebilir (e.g., payments, tracking)
  • Bazıları sadece drawer’da (e.g., calendar, events, meal-menus)
  • Bazıları sadece tab’da (e.g., notifications, profile)

Grafik Görünümü

Backlinkler