Uygulamalarınızda sayfa geçişi istiyor veya en azından uygulama içerisinde 2 sayfa varsa mutlaka react-navigation kullanmak zorundasınız. Kısaca kendi kullandığım kodu paylaşıcam.
Bir çok özellik mevcut ancak her birine değinmek mümkün değil tamamen ihtiyaca bağlı dökümandan kullanmak doğrusu olacaktır.
Özellikle mobil uygulamalarda alan yetersizliği ve kullanıcı deneyimi için arayüzün basit ve işlevsel olması gerekmekte. Swipeout ile buton üzerinde sağa ve sola kaydırma ile işlemler yapılabilir. Örneğin sola kaydır ve sil veya listede yer alan bilgi için özellikleri göster olabilir.
Önceki anlatıma nazaran bu kısımda flatlist ile listede seçim yapma ve bu listeye isteğe bağlı renk verebilme gibi özellikler eklenecek.
Örneğin kodları şu şekilde.
React Native ile listeleme yada ekranda alt alta sıralama işlemleri yapmak istiyorsanız en iyi tercih FlatList companenti olacaktır bunun altarnetifleri var (ListView) ancak en çok…
Uygulama başlangıcında kullanıcıya bilgi vermek ne nedir gibi açıklamalar yapmak için kullanılacak bir eklenti. Hem kullanımı kolay hemde kullanıcı için oldukça göz alıcı ve başarılı duran app-intro-slider kullanımına geçelim hemen.
Mobil uygulamalarda kullanıcı deneyimi önemli, kullanıcı sayfada aşağa yukarı gezinmek istemez bu sebeple Progress Steps kullanmak çok yerinde olacaktır. Bu kullanım şekline özellikle eticaret uygulamalarında sepet – adres – ödeme gibi veya uygulamaya kayıt olurken fazlaca detay bilgi alınacaksa ilk olarak kullanıcı adı şifre alıp devamında kişisel sorulara geçilebilir ve kullanıcı kaç adım olduğunu gördüğü için yapacağı işlemler daha net olacaktır.
Uygulama içerisinde kullanıcıya bilgilendirme mesajları vermek önemli ama bunu görsel olarakta güzel sunmalıyız. React native alert kullanmak her zaman göze hoş gelmeyebilir. Toast mesaj benzeri bir yapı kullanmak hem işleri daha kolaylaştıracak hemde gözede hoş gelecektir.
Her uygulamada bazı bilgilerin kayıtlı kalması mutlaka gerekebilir. Bu işlem için veritabanı oluşturmakta bir alternatif olabilir fakat küçük bilgiler için kullanışlı olmayabilir. Örnek vermek gerekirse bir login ekranında beni hatırla özelliği için AsyncStorage kullanılabilir ve kullanımı oldukça kolay. Doğrudan örnek kodunu paylaşıyorum.
Bu yazım bir bakıma önceki yazının devamı sayılabilir.
Daha önce bileşenlere style yazarken aynı .js içerisinde yazıyorduk fakat bu karmaşık projeler için okunabilirliği daha da karmaşık yapmaktadır. Bu sebeple style dosyamızı ayrı tutmak daha düzenli bir yapı kurmamızı sağlayacaktır.
Uygulama yazarken bir yandanda temiz kod örneklerinede dikkat etmeliyiz. Bu yazımızda hem temiz kod için style etiketlerini daha düzenli nasıl yazabiliriz ona bakacağız hemde üç farklı kullanımdan ikisini göreceğiz.
