Alert butonları
- React Native kursu
- Başlangıç
- Ders 95/116
- 5 dk
Alert butonları ve callback'lerini öğrenirsin.
Alert butonları
Varsayılan olarak Alert.alert tek bir Tamam düğmesi gösterir. Kendi butonlarını eklemek için üçüncü parametre olarak bir dizi verirsin. Her buton bir nesnedir ve text ile onPress özellikleri içerir.
Alert.alert('Kaydet', 'Değişiklikler kaydedilsin mi?', [
{ text: 'İptal', onPress: () => {} },
{ text: 'Kaydet', onPress: () => kaydet() }
]);Butonlar dizideki sırayla soldan sağa dizilir. iOS'ta en fazla üç buton gösterilir; Android'de ise sınırlama daha esnektir.
onPress geri çağırması
Her buton nesnesinin onPress özelliği, kullanıcı o butona bastığında çağrılan bir işlevdir. Bu işlevin içinde istediğin işlemi yaparsın: veriyi kaydetmek, navigasyonu değiştirmek veya bir durumu güncellemek.
İptal butonu için genellikle boş bir işlev verirsin: onPress: () => {}. Onay butonu için ise asıl işlemi yapan işlevi verirsin. Butona basıldıktan sonra Alert otomatik kapanır; ayrıca kapatma kodu yazmana gerek yoktur.
Uygulama Sıra sende: iki butonlu Alert
Alert.alert çağır. Başlık 'Çıkış', mesaj 'Çıkmak istiyor musunuz?' olsun. İki buton ekle: İptal ve Çık. Her birine bir onPress ver.
Başlangıç kodu
import { Alert, Button } from 'react-native';
function Screen() {
return (
<Button
title="Çıkış"
onPress={() => {
// iki butonlu Alert göster
}}
/>
);
}Örnek çözüm
import { Alert, Button } from 'react-native';
function Screen() {
return (
<Button
title="Çıkış"
onPress={() =>
Alert.alert('Çıkış', 'Çıkmak istiyor musunuz?', [
{ text: 'İptal', onPress: () => {} },
{ text: 'Çık', onPress: () => cikisYap() }
])
}
/>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Boşluğu doldur: buton nesnesi
{ text: 'Tamam', ____: () => kaydet() }{ text: 'Tamam', onPress: () => kaydet() }Açıklama: onPress, butona basıldığında çağrılır.
2 Alert buton nesnesinin zorunlu özelliği hangisidir?
{ text: 'Kaydet', onPress: () => save() }- color
- text Doğru cevap
- style
- icon
Açıklama: text, butonun etiketini belirler ve zorunludur.
3 Eşleştir: buton özelliği ve görevi
| Kavram | Anlamı |
|---|---|
text |
düğme etiketi |
onPress |
basınca çalışan işlev |
style |
düğme biçimi |