Modal animasyon
- React Native kursu
- Başlangıç
- Ders 98/116
- 5 dk
Modal animationType öğrenirsin.
animationType
Modal açılıp kapanırken animasyon eklemek için animationType prop'unu kullanırsın. Üç değer alır: slide (alttan kayarak gelir), fade (saydamlıkla belirir) ve none (animasyon yok, anında görünür).
<Modal visible={visible} animationType="slide">
{/* içerik */}
</Modal>Varsayılan değer none'dır; yani animasyonsuz açılır. slide mobil uygulamalarda en yaygın seçenektir; dikey kayma hissi verir. fade ise daha yumuşak bir geçiş sağlar.
Uygulama Sıra sende: animasyonlu Modal
Bir Modal ekle. visible prop'unu {visible}, animationType prop'unu "slide" olarak ayarla. İçine bir <Text> ve bir kapatma butonu koy.
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)} />
{/* animasyonlu 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>İçerik</Text>
<Button title="Kapat" onPress={() => setVisible(false)} />
</View>
</Modal>
</View>
);
}transparent prop
Modal varsayılan olarak tam opak beyaz arka planla açılır. Ama bazen modalın arkasındaki içeriği kısmen görünür tutmak istersin. Bunun için transparent prop'unu true yaparsın.
transparent aktifken Modal'ın arka planı saydam olur; yalnızca içeriği yazdığın View görünür. Bu, özel bir kart veya açılır menü efekti için uygundur. Arka planı yarı saydam yapmak için View'e backgroundColor: 'rgba(0,0,0,0.5)' gibi stil verebilirsin.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Boşluğu doldur: slide animasyonu
<Modal animationType="____" visible={visible}><Modal animationType="slide" visible={visible}>Açıklama: slide ile Modal alttan kayarak gelir.
2 Hangisi animationType'ın geçerli bir değeridir?
<Modal animationType="?">- bounce
- zoom
- rotate
- fade Doğru cevap
Açıklama: fade, Modal'ı saydamlıkla açar.
3 Eşleştir: animationType ve etkisi
| Kavram | Anlamı |
|---|---|
slide |
alttan kayarak açılır |
fade |
saydamlıkla açılır |
none |
animasyonsuz açılır |