Modal
- React Native kursu
- Başlangıç
- Ders 97/116
- 5 dk
Modal bileşeni ile özel pencere öğrenirsin.
Modal bileşeni
Modal, ekranın tamamını kaplayan bir kaplama (overlay) bileşenidir. Alert'ten daha esnektir: içine istediğin bileşenleri koyabilirsin; özel düğmeler, formlar, görseller gösterebilirsin. Modal, react-native paketinin bir parçasıdır.
Modal'ın görünmesi visible prop'una bağlıdır. visible true olduğunda Modal gösterilir, false olduğunda gizlenir. Genellikle bir useState değişkeni ile kontrol edilir.
Uygulama Sıra sende: Modal ile içerik göster
Bir Modal ekle. visible prop'unu {visible} olarak ayarla. Modal içine bir <Text> ve bir <Button> koy; butona basıldığında setVisible(false) çağrılsın.
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)} />
{/* 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}>
<View>
<Text>İçerik</Text>
<Button title="Kapat" onPress={() => setVisible(false)} />
</View>
</Modal>
</View>
);
}Modal içeriği
Modal bileşeninin içine herhangi bir React Native bileşeni koyabilirsin: View, Text, TextInput, Button ve daha fazlası. İçerik, Modal'ın görünür olduğu sürece ekranda kalır. Modal kapanınca içerik de gizlenir.
Modal içeriğini genellikle bir View ile sarıp stil verirsin. Bu, içeriğin konumunu ve arka planını kontrol etmeni sağlar. Modal varsayılan olarak tüm ekranı kaplar; istersen transparent ve stillerle özelleştirebilirsin.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Modal'ın görünmesini sağlayan prop hangisidir?
<Modal visible={true}>...</Modal>- open
- visible Doğru cevap
- show
- display
Açıklama: visible prop Modal'ı açıp kapatır.
2 Boşluğu doldur: Modal visible prop
<Modal ____={visible}><Modal visible={visible}>Açıklama: visible ile Modal'ı kontrol edersin.
3 Eşleştir: Modal özelliği ve görevi
| Kavram | Anlamı |
|---|---|
visible |
görünürlük kontrolü |
animationType |
açılış animasyonu |
transparent |
arka plan saydamlığı |