Proje: Okul B2B App · Hub: Okul B2B App — Conventions
Tab Bar ve Navigasyon Detayları
Tab Bar Konfigürasyonu
Expo Router <Tabs> bileşeni app/(tabs)/_layout.tsx içinde.
Kritik Ayarlar:
lazy: false— Tüm tab’lar baştan render edilir (blank screen fix)freezeOnBlur: false— Ekranlar dondurulmaz (render tutarlılığı)animation: 'fade'
Tab İkonları
İkonlar SVG string olarak constants/TabIcons.ts’de tanımlı. Her ikon COLOR_PLACEHOLDER içerir, render sırasında gerçek renk ile replace edilir:
const svgString = TAB_ICONS[iconName].replace('COLOR_PLACEHOLDER', color);SvgXml (react-native-svg) ile render edilir.
Tab Bar Renkleri
constants/TabStyles.ts’den getTabColors(resolvedTheme):
| Durum | Color |
|---|---|
| Active | Tema bazlı |
| Inactive | Tema bazlı |
| Background | Tema bazlı |
| Border | Tema bazlı |
Tab Etiketleri
| Tab | Başlık |
|---|---|
| index | Anasayfa |
| leads | Bilgi Talepleri |
| gallery | Galeri |
| content | İçerikler |
| profile | Profil |
Not: useScreenTracking hook’u ‘leads’ segmentini 'Bilgi Talepleri' olarak map eder.
Tablet Desteği
useResponsive().isTablet ile tablet için padding ve yükseklik ölçeklenir.
Safe Area
useSafeAreaInsets() ile alt safe area insets Android’de tab bar yüksekliğine eklenir.
Related
- navigation-yapisi — route yapısı
- tema-ve-renk-sistemi — renk sistemi