Material Top Tabs
- React Native kursu
- Orta seviye
- Ders 50/116
- 5 dk
Material Top Tabs navigator öğrenirsin.
Material Top Tabs
Material Top Tabs, ekranın üstünde sekmeleri gösteren bir navigasyon desenidir. WhatsApp'ın "Sohbetler / Durum / Aramalar" sekmeleri gibi. Kullanıcı sekmeye dokunur ya da parmağıyla kaydırır.
React Navigation, bunu createMaterialTopTabNavigator ile sağlar. Kullanımı Bottom Tabs ile benzer: const Tab = createMaterialTopTabNavigator();, sonra <Tab.Navigator><Tab.Screen ... /></Tab.Navigator>. Fark, sekmelerin üstte görünmesi ve kaydırma ile geçiş yapılabilmesidir. Bu desen, kategorize edilmiş içerikler için uygundur: bir akışın "Hepsi / Beğeniler / Yorumlar" sekmeleri gibi. Sekme çubuğu özelleştirilebilir: renk, aktif sekme rengi, gösterge stili. Material Top Tabs, mobilde kaydırma hissini doğal kılan bir yapı sunar.
Uygulama Material Top Tabs yaz
createMaterialTopTabNavigator'ı @react-navigation/material-top-tabs'tan içe aktar ve Tab'a ata. HomeScreen ve ProfileScreen basit bileşenler olsun. App bileşeninde <Tab.Navigator><Tab.Screen name="Home" component={HomeScreen} /><Tab.Screen name="Profile" component={ProfileScreen} /></Tab.Navigator> döndür.
Başlangıç kodu
// üst sekme navigatorunu içe aktar; Tab'a ata
// Text'i react-native'den içe aktar
// HomeScreen ve ProfileScreen yaz
// App bileşeni yaz; Tab.Navigator içinde iki Tab.Screen olsunÖrnek çözüm
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import { Text } from "react-native";
const Tab = createMaterialTopTabNavigator();
function HomeScreen() { return <Text>Ana sayfa</Text>; }
function ProfileScreen() { return <Text>Profil</Text>; }
function App() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
);
}Ne zaman kullanılır?
Material Top Tabs ve Bottom Tabs farklı amaçlara uyar. Material Top Tabs kategorize edilmiş içerik için iyidir: bir akışın kategorileri, bir profilin sekmeleri. Bottom Tabs ise ana bölümler içindir: ana sayfa, arama, profil gibi.
İkisini birlikte kullanmak da yaygındır: altta ana bölümler (Bottom Tabs), bir bölümün içinde kategoriler (Material Top Tabs). Bu, WhatsApp'ta görülür: altta "Sohbetler / Durum / Aramalar" (Material Top Tabs) ve ana uygulama bölümleri (Stack veya Bottom Tabs). Doğru seçim, içerik yapına bağlıdır. Kullanıcıların ana bölümler arasında mı, yoksa kategoriler arasında mı gezineceğini düşün. Bu, hangi deseni seçeceğini belirler.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Material Top Tabs ile Bottom Tabs arasındaki temel fark nedir?
<Tab.Navigator>...</Tab.Navigator>- Hiçbir fark yoktur
- Sekmelerin konumu (üstte vs altta) ve kaydırma Doğru cevap
- Yalnızca Bottom Tabs çalışır
- Yalnızca Material Top Tabs ikon destekler
Açıklama: Material Top Tabs üstte, Bottom Tabs altta; Material Top Tabs kaydırmayı destekler.
2 createMaterialTopTabNavigator'ı içe aktar
import { ____ } from "@react-navigation/material-top-tabs";import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";Açıklama: createMaterialTopTabNavigator @react-navigation/material-top-tabs'tan gelir.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
Material Top Tabs |
Üst sekmeler |
createMaterialTopTabNavigator |
Tab nesnesini üretir |
kaydırma |
Sekme geçişi |
Tab.Navigator |
Sekme kapsayıcısı |