React Native
Material Top Tabs
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.
Örnek çözümü göster
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.
Kendini test et
-
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
- Yalnızca Bottom Tabs çalışır
- Yalnızca Material Top Tabs ikon destekler
Cevabı göster
Sekmelerin konumu (üstte vs altta) ve kaydırma — Material Top Tabs üstte, Bottom Tabs altta; Material Top Tabs kaydırmayı destekler.
-
createMaterialTopTabNavigator'ı içe aktar
import { ____ } from "@react-navigation/material-top-tabs";
Cevabı göster
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
-
Kavramı rolüne eşle
- Material Top Tabs
- Üst sekmeler
- createMaterialTopTabNavigator
- Tab nesnesini üretir
- kaydırma
- Sekme geçişi
- Tab.Navigator
- Sekme kapsayıcısı
Sıradaki ders: Tab badge
