Platform.select
- React Native kursu
- Başlangıç
- Ders 101/116
- 5 dk
Platform.select ile platform özelinde stil öğrenirsin.
Platform.select
Her seferinde if (Platform.OS === 'ios') yazmak yerine Platform.select kullanabilirsin. Bu işlev, bir nesne alır ve geçerli platforma karşılık gelen değeri döndürür. Kodu daha kısa ve okunaklı yapar.
const padding = Platform.select({
ios: 20,
android: 16,
});Burada iOS'ta padding 20, Android'de 16 olur. Nesnenin anahtarları ios ve android'dir. default anahtarı da verebilirsin; eşleşen platform yoksa o kullanılır.
Platform.select nesnesi
Platform.select'e verdiğin nesnenin anahtarları ios, android ve isteğe bağlı default'tür. Her anahtara istediğin değeri verebilirsin: sayı, dize, bileşen, işlev. Geçerli platforma karşılık gelen anahtarın değeri döndürülür.
Eğer nesnede hem ios hem android varsa, hangi platformda olursan o değer döner. default ise yalnızca ne iOS ne Android anahtarı varsa kullanılır; örneğin web ortamında.
Uygulama Sıra sende: platforma özgü dolgu
Platform'u içe aktar. padding değişkenini Platform.select({ ios: 20, android: 16 }) sonucuna eşitle.
Başlangıç kodu
import { Platform } from 'react-native';
// padding'i Platform.select ile ayarla
const padding = null;Örnek çözüm
import { Platform } from 'react-native';
const padding = Platform.select({
ios: 20,
android: 16,
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Boşluğu doldur: Platform.select çağrısı
const padding = Platform.____({ ios: 20, android: 16 });const padding = Platform.select({ ios: 20, android: 16 });Açıklama: select ile platforma özgü değeri alırsın.
2 Platform.select ne döndürür?
Platform.select({ ios: 20, android: 16 })- Bir dizi
- Tüm değerleri
- Geçerli platformun değerini Doğru cevap
- Bir işlev
Açıklama: Platform.select geçerli platforma karşılık gelen değeri döndürür.
3 Eşleştir: anahtar ve kullanım
| Kavram | Anlamı |
|---|---|
ios |
iOS değeri |
android |
Android değeri |
default |
yedek değer |