Özet - Uyarılar
- React Native kursu
- Başlangıç
- Ders 99/116
- 5 dk
Alert, Toast ve Modal'ı birleştirerek bir onay penceresi yazarsın.
Özet - Uyarılar
Bu grupta kullanıcıya uyarı ve bildirim göstermenin üç yolunu öğrendin. Alert.alert ile kalıcı bir iletişim kutusu açarsın; butonlar ekleyerek kullanıcı onayı alırsın. ToastAndroid ile Android'de kısa süreli bildirim gösterirsin.
Modal ile ekranı kaplayan özel bir kaplama oluşturursun; visible ile açıp kapatır, animationType ile geçiş animasyonu eklersin. Şimdi bunları bir araya getiren alıştırmalar yapalım.
Uygulama Sıra sende: onaylı Alert
Alert.alert çağır. Başlık 'Sil', mesaj 'Silinecek, emin misin?' olsun. İki buton ekle: İptal (boş onPress) ve Sil (sil() çağrısı).
Başlangıç kodu
import { Alert, Button } from 'react-native';
function Screen() {
return (
<Button
title="Sil"
onPress={() => {
// iki butonlu onay Alert'i göster
}}
/>
);
}Örnek çözüm
import { Alert, Button } from 'react-native';
function Screen() {
return (
<Button
title="Sil"
onPress={() =>
Alert.alert('Sil', 'Silinecek, emin misin?', [
{ text: 'İptal', onPress: () => {} },
{ text: 'Sil', onPress: () => sil() }
])
}
/>
);
}Uygulama Sıra sende: slide animasyonlu Modal
Bir Modal ekle. visible prop'unu {visible}, animationType prop'unu "slide" yap. İçine bir <Text> ve kapatma butonu ekle.
Başlangıç kodu
import { useState } from 'react';
import { Modal, View, Text, Button } from 'react-native';
function Screen() {
const [visible, setVisible] = useState(false);
return (
<View>
<Button title="Aç" onPress={() => setVisible(true)} />
{/* slide Modal ekle */}
</View>
);
}Örnek çözüm
import { useState } from 'react';
import { Modal, View, Text, Button } from 'react-native';
function Screen() {
const [visible, setVisible] = useState(false);
return (
<View>
<Button title="Aç" onPress={() => setVisible(true)} />
<Modal visible={visible} animationType="slide">
<View>
<Text>Açılır pencere</Text>
<Button title="Kapat" onPress={() => setVisible(false)} />
</View>
</Modal>
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Modal'ın visible prop'u ne yapar?
<Modal visible={visible}>- Modal'ı açıp kapatır Doğru cevap
- Modal'a stil verir
- Modal'ın konumunu ayarlar
- Modal'ın boyutunu değiştirir
Açıklama: visible true/false ile Modal'ı açıp kapatır.
2 Eşleştir: araç ve kullanım
| Kavram | Anlamı |
|---|---|
Alert.alert |
kalıcı iletişim |
ToastAndroid |
kısa bildirim |
Modal |
özel kaplama |