React Native Modal Kullanımı

tarihinde gönderilmiş tarafından

React Native ile uygulama geliştirirken , uygulamamızın kullanılabilirliğini arttırmak için sürekli kullanıcı ile etkileşim halinde oluruz aslında geliştirilen uygulamalar (oyunlar hariç) insanların hayatlarını kolaylaştırmak için tasarlanırlar ve sürekli kullanıcadan data alınır.

Kullanıcıdan data alma işlemi yada uygulama içi uyarılar ne kadar şık yada kullanılabilir olursa uygulamamız o kadar indirme alır. Uzun lafın kısası eğer kullanıcı ile kolay etkileşim sağlamak istiyorsak Modal Kullanırız.

Modal kullanımına geçmeden önce React Native Modal kurulumu sağlayalım .

sudo yum install react-native-modal --save

kurulum işlemini tamamladıktan sonra kullanmak istediğimiz projenin ilgili sayfasına import ediyoruz,

import Modal from 'react-native-modal'

import işlemi tamamlandıktan sonra return içerisinde sağlıklı bi yere Modalımızı ekliyoruz.

                <Modal
                    isVisible={this.state.dogruCevap}
                    animationIn={'slideInLeft'}
                    animationOut={'slideOutRight'} >

                    <View style={{
                        backgroundColor: 'rgba(0,0,0,0)'
                    }}>



                    </View>
                </Modal>

Yukarıdaki göstermiş olduğum modal oldukça basit bir örneği öncelikle modal componentimizi oluşturuyoruz sonrasında bu componentin içerisine modal içerisinde göstereceğimiz componentleri ekliyoruz, işlem bu kadar .

animationIn,animationOut
Modal ı biraz özelliştirecek olursak nereden ekrana geleceği ve nereden ekrandan gideceğini belirlemek için
ekrana giriş için animationIn
ekrandan kaçışı için animationOut
nesnelerini kullanırız, bu nesnelerin aldığı değerler slideInLeft,slideOutLeft,slideInRight,slideInUp,slideInDown vs..

isVisible
Modalın ekranda görünmesi için isVisible nesnesine true, ekrandan kaybolması için isVisible nesnesine false boolen vermeliyiz,

onDismiss
Diğer nesnelerden birisi onDismiss dir , bu nesnenin kullanılması durumunda modal kapatıldığında tetiklenmesi istenen fonksiyon çalışır bu sayede ekrandan kullanıcadan alınmak istenen veri alınır veri alındıktan sonrada işleminiz tamamlanmıştır gibi bir sayfaya navigate edilebilir.

onDismiss={()=>this.islemTamam()}

onShow
Bu nesne onDismiss in tam tersidir yani Modal ekrana geldiği anda tetiklenecek fonksiyonu çalıştırır, mesela bir soru cevap uygulaması yaptınız 10 sn içerisinde cevap istiyorsunuz modal yani soru ekrana geldiği anda geri saymaya başlarsınız süre dolduğunda modal ı kapatırsınız modal kapandığındada onDismiss çalışır ve diğer sayfada soru doğrumu yanlışmı kullanıcıya gösterirsiniz.

react native modal