Modal animasyon

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.

Örnek çözümü göster

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.

Kendini test et

Boşluğu doldur: slide animasyonu

<Modal animationType="____" visible={visible}>

Cevabı göster

<Modal animationType="slide" visible={visible}>

Hangisi animationType'ın geçerli bir değeridir?
```
<Modal animationType="?">
```
- bounce
- zoom
- rotate
- fade
Cevabı göster

fade — fade, Modal'ı saydamlıkla açar.
Eşleştir: animationType ve etkisi

slide

alttan kayarak açılır
fade

saydamlıkla açılır
none

animasyonsuz açılır

Sıradaki ders: Özet - Uyarılar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler