Modal Kullanımı – Enclosing View (Dialog, Ara Sayfa)

Android ya da IOS ile uygulama geliştirmelerimizde sık kullanılmakta olan dialog bileşeninin yerini React Native de Modal bileşeni almaktadır. Modal bileşenini ara sayfa olarak da tanımlayabiliriz.

Uygulama esnasında kullanıcıya ara bir sayfa açmak, uyarı mesajı vermek, soru sormak gibi dialog sayfaları oluşturulmaktadır. Bu yapılar hız yüksekliği ve hafızada daha az yer kaplaması bakımından yeni bir sayfa oluşturmak yerine daha çok tercih edilmektedir ki edilmelidir de. React Native teknolojisinde ise Modal bileşeni bize bu yapıyı kullanmamızı sağlamaktadır. Modal bir react-native kütüphanesi bileşenidir.

Modal bileşeninin bazı parametrelerini açıklamaya çalışalım.

visible

Modal bileşeninin gösterilip gösterilmeyeceğini belirten parametredir.

onShow

Modal bileşeni gösterildiği zaman tetiklenen fonksiyon.

transparent

Modal bileşeni gösterildiğinde arkada kalan sayfanın gösterilip gösterilmeyeceğini belirler.

animationType

Modal bileşeninin ekrana ne şekilde geleceğini belirtmek için kullanılır.

onDismiss

Modal bileşeni kapatıldığı zaman tetiklenen fonksiyon.

Modal bileşeninin kullanımına dair bir örnek uygulama yapalım. Örnek uygulamamızda iki adet Modal bileşeni kullanacağız. Bir tanesinde çalma listesindeki müziklerin çalma sürelerini belirleyeceğiz. Diğerinde ise müzik listemize yeni bir müzik ekleme yapmak istersek kullanacağız.

Alttaki resimde Play tuşunun bize göre solundaki buton müzik ekleme, sağındaki ise çalma süresi belirleme butonudur.

Müzik ekleme butonuna basıldığında çalışacak Modal bileşenimiz ve sayfamız da şu şekildedir.

Şimdi ise çalma süresi Modal bileşeni ve sayfasını gösterelim.