Platform-specific bileşen
- React Native kursu
- Başlangıç
- Ders 104/116
- 5 dk
Platform'a özel bileşen yazmayı öğrenirsin.
Platform-specific bileşen
Platform.select yalnızca sayı ve dize değil, bileşen de seçebilir. iOS'ta başka bir bileşen, Android'de başka bir bileşen göstermek istediğinde bu yöntemi kullanırsın. Her anahtara bir bileşen atarsın; Platform.select geçerli platformunkunu döndürür.
const Button = Platform.select({
ios: IOSButton,
android: AndroidButton,
default: DefaultButton,
});Burada Button değişkeni, hangi platformda olursan ol ilgili bileşeni tutar. Bileşeni <Button /> olarak kullanabilirsin; React Native doğru olanı render eder.
Uygulama Sıra sende: platforma göre bileşen seç
Platform'u içe aktar. Card değişkenini Platform.select({ ios: IOSCard, android: AndroidCard, default: DefaultCard }) sonucuna eşitle.
Başlangıç kodu
import { Platform } from 'react-native';
// Card'ı Platform.select ile ayarla
const Card = null;Örnek çözüm
import { Platform } from 'react-native';
const Card = Platform.select({
ios: IOSCard,
android: AndroidCard,
default: DefaultCard,
});Varsayılan değer
Platform.select nesnesinde default anahtarı, ne ios ne android anahtarı varsa kullanılır. Bu, uygulaman gelecekte yeni bir platforma (örneğin web) genişletilirse güvenlik ağı sağlar.
Genellikle default değerini, çoğunuk olarak kullandığın platformun bileşenine ayarlarsın. Örneğin hem iOS hem Android değerleri varsa ve default yoksa, web ortamında undefined döner ve bu hataya yol açar. default eklemek bu riski ortadan kaldırır.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Boşluğu doldur: bileşen seç
const Button = Platform.____({ ios: IOSButton, android: AndroidButton });const Button = Platform.select({ ios: IOSButton, android: AndroidButton });Açıklama: Platform.select ile bileşeni seçersin.
2 Platform.select ile bileşen seçmek nasıl çalışır?
Platform.select({ ios: A, android: B })- Geçerli platformun bileşenini döndürür Doğru cevap
- İki bileşeni de birleştirir
- Yalnızca ios bileşenini döndürür
- Hata verir
Açıklama: Platform.select geçerli platformun bileşenini döndürür.
3 Eşleştir: anahtar ve kullanım
| Kavram | Anlamı |
|---|---|
ios |
iOS bileşeni |
android |
Android bileşeni |
default |
yedek bileşen |