createBottomTabNavigator

createBottomTabNavigator ile tab navigasyonu öğrenirsin.

createBottomTabNavigator kullanımı

createBottomTabNavigator, React Navigation'ın Bottom Tabs için sağladığı üretici fonksiyondur (factory). Çağırınca bir Tab nesnesi döndürür; bu nesne Tab.Navigator ve Tab.Screen bileşenlerini içerir. İçe aktarma: import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";.

Tipik kullanım: const Tab = createBottomTabNavigator();. Sonra <Tab.Navigator><Tab.Screen name="Home" component={HomeScreen} /></Tab.Navigator> yazarsın. Bu yapı, alt sekme navigasyonunun omurgasıdır. Tab.Navigator bir kapsayıcıdır; tüm sekmeleri saran üst bileşendir. Tab.Screen ise tek bir sekmeyi tanımlar. Bu ayrım, React Navigation'ın tüm navigator'larında aynıdır: Navigator + Screen çifti. Bu desen, koda tutarlılık katar.

Uygulama İki ekranlı Tab navigator yaz

Önceki dersteki gibi createBottomTabNavigator'ı içe aktar ve Tab'a ata. Sonra bir App bileşeni yaz. Dönüşte <Tab.Navigator><Tab.Screen name="Home" component={HomeScreen} /><Tab.Screen name="Search" component={SearchScreen} /></Tab.Navigator> kullan. HomeScreen ve SearchScreen basit bileşenler olsun (sadece bir Text döndürsünler).

Örnek çözümü göster

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Text } from "react-native";

const Tab = createBottomTabNavigator();

function HomeScreen() { return <Text>Ana sayfa</Text>; }
function SearchScreen() { return <Text>Arama</Text>; }

function App() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Search" component={SearchScreen} />
    </Tab.Navigator>
  );
}

Screen options

Her Tab.Screen, options prop'u ile özelleştirilir. Bu prop bir nesne alır; sekme etiketini, ikonu ve rengini ayarlamanı sağlar. Örnek: options={{ title: "Ana Sayfa", tabBarIcon: ... }}.

options nesnesi içinde en sık kullanılan alanlar şunlardır: title (sekme etiketi), tabBarIcon (ikon çizen fonksiyon), tabBarBadge (bildirim sayısı). Bu özelleştirme, uygulamanın marka kimliğine uygun bir görünüm kazanmasını sağlar. Sonraki derslerde ikon ve badge eklemeyi ayrı ayrı öğreneceğiz. options prop'u bir nesne döndüren bir fonksiyon da alabilir; bu, dinamik seçenekler için kullanışlıdır. Örneğin sekme odaklanmışsa farklı ikon göstermek gibi.

Kendini test et

createBottomTabNavigator'ı içe aktar

import { ____ } from "@react-navigation/bottom-tabs";

Cevabı göster

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

Tab.Navigator'ın rolü nedir?
```
<Tab.Navigator>...</Tab.Navigator>
```
- Tek sekme tanımlar
- İkon ekler
- Skoru tutar
- Tüm sekmeleri saran kapsayıcıdır
Cevabı göster

Tüm sekmeleri saran kapsayıcıdır — Tab.Navigator tüm sekmeleri saran kapsayıcıdır.
Kavramı rolüne eşle

createBottomTabNavigator

Tab nesnesini üretir
Tab.Navigator

Sekme kapsayıcısı
Tab.Screen

Tek sekme
name

Sekme adı

Sıradaki ders: Tab icons

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler