React Native
Tab icons
Tab bar icons öğrenirsin.
Tab ikonları
Sekmelere ikon eklemek uygulamayı görselleştirir. Tab.Screen'in options prop'una tabBarIcon eklersin. Bu, bir fonksiyondur; parametre olarak renk ve boyut alır, bir ikon bileşeni döndürür.
Örnek: options={{ tabBarIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} /> }}. Burada Ionicons, @expo/vector-icons paketinden gelen bir ikon setidir. React Native projelerinde en sık kullanılan ikon paketidir. Fonksiyona gelen color ve size, sekme odağa göre değişir; odaklı sekme daha belirgin renk alır. Bu sayede ikonlar otomatik olarak tema ile uyumlu olur. İkon adı (name), setin sağladığı isimlerden biri olmalıdır; Yanlış ad yazarsan ikon görünmez.
Uygulama Tab'lara ikon ekle
Önceki dersteki gibi createBottomTabNavigator'ı içe aktar, Tab'a ata. Ionicons'u @expo/vector-icons'tan içe aktar. HomeScreen ve SearchScreen basit bileşenler olsun. App bileşeninde her Tab.Screen'in options'una tabBarIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} /> ekle (Search için name="search").
Örnek çözümü göster
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";
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} options={{ tabBarIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} /> }} />
<Tab.Screen name="Search" component={SearchScreen} options={{ tabBarIcon: ({ color, size }) => <Ionicons name="search" color={color} size={size} /> }} />
</Tab.Navigator>
);
}
İkon setleri
@expo/vector-icons birçok ikon seti içerir: Ionicons, MaterialIcons, FontAwesome, MaterialCommunityIcons ve daha fazlası. Her setin kendi ikon adları vardır. Aynı kavram farklı setlerde farklı adla bulunabilir: "home" hem Ionicons'ta hem MaterialIcons'ta vardır.
Set seçimi tasarım tercihidir. iOS benzeri görünüm için Ionicons, Android benzeri görünüm için MaterialIcons yaygındır. Bazı setler farklı tarzlar sunar: FontAwesome düz ikonlar, MaterialCommunityIcons çok çeşitli kategoriler. İkon adını doğru yazmak önemlidir; setin sağladığı listeden seçmelisin. Yanlış ad yazarsan ikon görünmez. Expo projelerinde bu setler varsayılan olarak yüklüdür; ek paket gerekmez. Bu kolaylık, Expo'nun en büyük avantajlarından biridir.
Kendini test et
-
Kavramı rolüne eşle
- tabBarIcon
- İkon çizer
- color
- İkon rengi
- size
- İkon boyutu
- Ionicons
- İkon seti
-
tabBarIcon fonksiyonu ne döndürür?
tabBarIcon: ({ color, size }) => /* ... */
- Bir ikon bileşeni
- Bir dize
- Bir sayı
- Bir dizi
Cevabı göster
Bir ikon bileşeni — tabBarIcon bir ikon bileşeni döndürür.
-
Ionicons'u içe aktar
import { ____ } from "@expo/vector-icons";
Cevabı göster
import { Ionicons } from "@expo/vector-icons";
Sıradaki ders: Material Top Tabs
