Sayfalar Arası Parametre Gönderme ve Kullanma

Geliştirdiğimiz mobil uygulamalarda sayfalar arası geçişler yapmaktayız. Bu geçişlerde kimi zaman diğer sayfaya veriler göndermek gereksinimi olabilmektedir. Bu yazıda kısaca bundan bahsedeceğiz.

Daha önceden geliştirmiş olduğumuz iki sayfalı basit uygulamamız üzerinden devam edeceğiz. Tabi sayfaları biraz genişletmemiz bu konuyu net olarak anlayabilmemiz için faydalı olacaktır.

Örneğimizde birinci sayfadan ikinci sayfaya geçişte isim ve yaş olmak üzere iki tane parametre göndereceğiz. Bu parametreleri geçiş yığınının (stack navigator) içerisinde belirteceğiz. Yapılması gereken gidilecek sayfayı belirttiğimiz ifadeden sonra virgül koyup köşeli parantez içerisinde parametrelerimizi aralarına virgül koyarak tamamlamak. Parametre olarak integer, string, array, list ve buna benzer bütün tiplerde değer gönderebiliriz. Biz bu örnekte isim değerini string olarak, yaş değerini ise integer olarak göndereceğiz.

Sayfalar arası parametre gönderme kodu

Kodda görüldüğü üzere IkinciSayfamiz olarak belirtilen sayfaya isim olarak ‘ali’, yaş olarak da 10 değerlerini göndereceğiz. Peki bu parametreleri diğer sayfada nasıl elde edeceğiz?

Açılan sayfaya parametre gönderimi oldu ise bunları render() fonksiyonunun içerisinde elde edebiliyoruz. Bunun için props yapısı kullanılmaktadır. props yapısını başka bir yazıda ayrıntılı olarak anlatmaya çalışacağız. Tekrar geri dönelim konumuza. render() fonksiyonunun içerisinde props yapısından navigation bölümünü alıyoruz. Bu bölümde geçiş ile alakalı bilgiler mevcuttur. Biz şu an parametreleri almak istiyoruz. Bunun için getParam fonksiyonunu kullanarak gönderilen parametrelerin değişkenlerinin aldıkları değerleri çekebiliriz. Eğer beklediğimiz değişkende bir parametre gönderilmedi ise buna default olarak bir değer atabilmekteyiz. Mesela örnek kodda da göreceğiniz üzere isim adlı bir parametre gönderilmedi ise isim olarak belirttiğimiz değişkenimiz ” olarak boş olacaktır. Yine yas adlı bir parametre gönderilmedi ise yas olarak belirttiğimiz değişkenimiz 0 olacaktır.

Parametre gönderilen sayfanın gelen parametreleri aldığı kod

Projeyi çalıştırdığımızda ise aşağıdaki sayfaları elde edebileceğiz.

1. sayfa
Parametreleri doğru olarak alıp ekrana yazdırdığımız sayfa

Teşekkürler.