React-Native Örnekler #1 Animasyon Kullanarak Soru Ekranı Hazırlama.

Merhabalar,

Bu yazımızda daha önce geliştirmiş olduğum kelime kartları uygulamasına eklemeyi düşündüğüm fakat bir türlü zaman bulup hazırlayamadığım quizz ekranı için yapmış olduğum çalışmayı inceleyeceğiz. Bu ekranı hazırlarken animasyon için react-native-animatable kütüphanesini tercih ettim. Siz de bu kütüphaneyi tercih edebilir veya daha farklı kütüphaneleri inceleyebilirsiniz. Hazırlayacağımız ekranda sorular basit bir animasyon ile listelenecek sonrasında ise seçilecek cevaba göre sıradaki soruyu getireceğiz veya kullanıcıya sonuç ekranını göstereceğiz. Başlangıcı daha fazla uzatmadan kodlamaya başlayalım. Yazının sonuna expo ve Github linkini de ekleyeceğim.

Geliştirme sırasında

  • React-Native 0.61.4
  • Expo 3.11.5
  • Visual Studio Code 1.41.1

kullandım.

Öncelikle komut penceresine gidip expo init “Proje Adı” yazarak yeni projemizi oluşturuyoruz. Bu komutu çalıştırdıktan sonra şablon seçmemizi istiyor. Hemen ilk sırada bulunan blank seçeneği ile devam ediyoruz.

Ekran Görüntüsü 1: Yeni proje oluşturma.

Şablon seçiminden sonra ise paket yöneticisi olarak yarn kullanmayı öneriyor. Ben bu adımda da no diyerek npm ile devam ettim.

Ekran Görüntüsü 2: Paket yöneticisi seçimi.

Paket yöneticisi seçtikten sonra projedeki paketlerinin indirilmesi bağlantı hızınıza göre bir kaç dakika alabilir. Paketler inip proje oluşturma işlemi tamamlandıktan sonra karşımıza aşağıdaki gibi bir metin gelecek.

Ekran Görüntüsü 3: Proje oluşturma sonuç ekranı

Ekranları oluşturmaya başlamadan önce son olarak proje klasörümüze girip animasyon için gerekli kütüphaneyi projemize dahil edeceğiz. Kütüphaneyi projemize dahil etmeden önce yukarıdaki ekran görüntüsünde de bizi yönlendirdiği gibi cd QuizzScreen diyerek uygulamanın bulunduğu klasöre giriyoruz. Sonrasında ise aşağıdaki komutu yazarak kütüphaneyi indiriyoruz. Buradaki link üzerinden de kullanabileceğiniz animasyonlara göz atabilirsiniz.

Ekran Görüntüsü 4: Projeye animasyon kütüphanesini ekleme.

Bu adımdan sonra VS Code tarafında sayfamızı geliştirmeye başlayabiliriz. Öncelikle ben Pages ve mevcut assets klasörü altına Styles klasörlerini oluşturdum. Yapacağım tüm çalışmayı bu klasörler altına oluşturacağım iki dosyada yapacağım. Styles kısmındaki koda girmeyeceğim. Github üzerinden bu kodları indirip kendinize göre tasarımı düzenleyebilirsiniz. O nedenle doğrudan Pages klasöründen devam ediyorum. Klasör yapısını da yine tasarım tarafındaki gibi kendinize göre değiştirebilirsiniz. (Pages/Styles) Bu klasör altında QuestionPage.js isimli yeni bir sayfa oluşturdum.

Oluşturduğumuz projede tek sayfa olacağı için App.js içerisinde doğrudan oluşturduğumuz sayfayı açacağız. Bunu yapmak için öncelikle oluşturduğumuz sayfayı App.js içerisine dahil ediyoruz. Devamında ise App.js içerisinde doğrudan oluşturduğumuz sayfayı dönüyoruz. Ekran görüntüsü de sol taraftaki gibi.

Kodlamaya geçmeden önce senaryoyu kafamızda canlandıralım ve kaç farklı ekran gerektiğine bakalım. Öncelikle kullanıcıya soruları göstereceğimiz bir ekrana ihtiyacımız var. İkinci ekranımız ise kullanıcı soruyu yanlış cevapladığında göstereceğimiz ekran. Burada da kullanıcı hatalı cevap verdiğinde oyunun bittiğine dair uyarı, puan ve yeniden oynayabilmesi için bir buton olacak. Bu iki ekrana ek olarak son olarak bir de doğru cevap verildiğinde göstereceğimiz bir ekrana ihtiyacımız var. Bu ekran da kullanıcı doğru cevap verdiğinde kullanıcıyı bilgilendireceğimiz, belki sonrasında güncel puan durumunu göstereceğimiz basit bir ekran olacak. İsteğe göre bu ekranı iptal de edebilirsiniz. Onun yerine kullanıcı doğrudan yeni soruyu da görüntüleyebilir.

Ben react-native uygulamalarında state yönetimi için redux kullanıyordum ancak bu örnekte hooks kullanacağım. Bu adımda tanımlamış olduğum değişkenler aşağıdaki gibidir. Ekran görüntüsü altında sırayla bu değişkenleri nerede kullandığımı da açıklayacağım.

Ekran Görüntüsü 6: Ekranlarda kullanılan değişkenler.
  • resultScreen: Sonuç ekranını görüntüleyebilmek için bu değişkeni kullanıyoruz. Bu değişkenin true dönmesi halinde uygulama yukarıda bahsetmiş olduğum ikinci ekranı kullanıcıya gösterecek.
  • answerAnimation: Burada da aslında animasyonları tek değişken üzerinde belirttim. Buradan yapacağım değişiklik ile tüm cevapları bir sonraki soruda farklı bir animasyon ile kullanıcıya sunabilirim. Bu değişkeni kullanmak yerine statik olarak da yazabilirsiniz. Ben animasyonları denerken tüm şıkları tek tek güncellememek için değişken üzerinden ilerledim.
  • wrongAnswerStyle: Soruyu kullanıcıya sunarken style değişkenine background için bir property atıyorum. Başlangıçta tüm sorular için aynı. Ancak kullanıcının yapacağı seçime göre yeni renk ataması yapıyorum. Böylece kullanıcı seçim yaptıktan sonra doğru/yanlış cevapları görüntüleyebiliyor.
  • trueAnswerStyle: Bu değişken de yukarıdaki ile birlikte kullanılıyor. Sadece sonuca göre iki değişkene farklı renkler atanıyor.
  • timerVisible: Kullanıcı yanlış cevap verdikten sonra sorunun altında bulunan süreyi gizlemek için bu değişkeni kullanıyorum. Bunu kullanmak yerine doğru cevapta uyguladığım gibi sadece süreyi durdurabilirsiniz.
  • controlAnswer: Kullanıcı seçimi yaptıktan sonra yaptığı seçimi bu değişkene atıyorum. Bir sonraki değişkende ise ikisini karşılaştırıp kullanıcının doğru/yanlış cevap verdiğine karar veriyorum.
  • trueAnswer: Bir önceki değişkende bu değişkenden de bahsetmiştim. Karşılaştırma için kullanılıyor.
  • secondCounter: Bu değeri kullanıcının doğru cevap vermesi için gereken süreyi tutmada kullanıyorum. Hemen sorunun altında bulunan geri sayım sayacı. Kullanıcı bu süre içerisinde bir cevabı işaretlemezse, oyun bitiyor.
  • restartGame: Oyunun yeniden başlayacağı durumlarda bu değeri true değeri dönüyoruz. Tüm değişkenler otomatik olarak başlangıç değerine dönüyor.
  • clickableStatus: Kullanıcı ilk cevabını verdikten sonra ekran hemen değişmiyor. Yaklaşık 2 – 3 saniye beklemek gerekiyor. (Bekleme süresini ben ekledim. Siz bekleme kullanmadan devam edebilirsiniz. Kullanıcının sonucu görmesi için bu şekilde bir düzenleme yaptım.) Bu sırada kullanıcı başka bir cevap seçemesin diye bu değeri kullanıp butonların tıklanma özelliğini kapatıyoruz.
  • landingScreenProperty: Doğru cevap verildikten sonra gösterilecek ekran için bu değişkeni kullanıyoruz. Bu değer true geldiği zaman kullanıcı iki soru arasındaki geçiş ekranını görüntülüyor.
  • nextQuestionSecond: Bu değeri ise bir sonraki soruya geçiş süresi için kullanıyoruz. Ben şimdilik 3 atadım. İki soru arasına 3 saniye bekleme süresi ekliyorum.

Değişkenlerden sonra bu değişkenleri kullandığımız yerleri inceleyelim.

Ekran Görüntüsü 7: Methodlar Part 1.

Burada yaptığımız işlemi yukarıdan aşağı anlatacak olursak, öncelikle süreç kullanıcı bir cevap verdikten sonra tetikleniyor. İlk iş olarak clickableStatus değerimizi true atıyoruz ki kullanıcı bizim kontrol işlemimiz esnasında bir daha seçim yapamasın. İkinci seçimi engellemek için TouchableHighlight bileşeninin disabled değerine true değerini atıyoruz. Bu işlemden sonra ise verilen cevap ile doğru cevabı karşılaştırıyoruz.

Eğer kullanıcı doğru cevap verdiyse vermiş olduğu cevabın arka planını değiştirip sıradaki soruya geçiş esnasında kullanılacak zamanı nextQuestionSecond değişkeni ile 3 saniye olarak belirliyoruz. (Tabiki bu süreyi de değiştirebilirsiniz.) Bu işlemlerden sonra araya 2 saniyelik bir bekleme koyup kullanıcıyı bir sonraki ekrana yönlendiriyoruz yani geçiş ekranına.

Eğer kullanıcı yanlış cevap verdiyse, diğer yanlış cevapların tümünü aynı renk arka plan ile değiştirip sadece doğru cevabı farklı bir arka plan rengi ile değiştiriyoruz. Yine burada soru altında bulunan sayacı gizledikten sonra soru ekranındaki bekleme süresini 3 saniye olarak atıyoruz ki kullanıcı oyun bitmeden önce doğru/yanlış seçenekleri görebilsin. Bir de bu iki işleme ek olarak kullanıcının verdiği cevabı da tekrar siliyoruz. Değiştirdiğimiz 3 değişkeni içerideki else bloğu altında görebilirsiniz. Diğer else bloğunu ise kullanıcı 15 saniye içinde cevap vermezse kullanıyoruz. Oyun aynı yanlış cevap senaryosunda olduğu gibi sona eriyor.

Ekran Görüntüsü 8: Methodlar Part 2

Eğer kullanıcı doğru cevap verdiyse bir ara ekran geldiğini söylemiştik. Part 2 de bulunan kod bloğunda ise ara ekranın gelip gelmeyeceğine karar veriyoruz. Eğer kullanıcı doğru cevap verdiyse ve landingScreenProperty true olarak güncellendiyse bu kod bloğu çalışmaya başlıyor.

Burada yine öncelikle kullanıcının verdiği cevabı kontrol ettiğimiz değişkeni varsayılan değer ile değiştiriyoruz ve yarım kalan sayacımızı 0 olarak güncelliyoruz. Buradan sonra sıradaki soruya geçiş için belirlediğimiz zamana göre sayaç çalışmaya başlıyor. Bu sayaç 0 olduktan sonra ise reset işlemine benzer bir işlem yaparak değişkenlerimizi yeni soru için hazırlıyoruz. Yine bu ekranda da kullanıcıya kazandığı puan veya toplam puanı görüntüleyebilirsiniz.

Ekran Görüntüsü 9: Methodlar Part 3

Methodlarla ilgili son ekran görüntümüz ise yukarıdaki. Burada da ilk kod bloğunda sonuç ekranı açık değilse ve kullanıcı henüz bir cevap vermemişse sayacı çalışıtırıyoruz. Hemen ikinci kod bloğunda ise kullanıcı yeniden başla dediği zaman tüm değişkenleri varsayılan değer ile tekrar güncelleyip süreci baştan başlatıyoruz.

Son olarak belirtmiş olduğum 3 ekran tasarımına ait kodların da ekran görüntüsünü paylaşıyorum fakat çok fazla detaya girmeyeceğim.

Ekran Görüntüsü 10: Soru ekranı.

Soru ekranında bir View içerisinde animated.view bileşenleri kullandım. Bu bileşenler eklemiş olduğum kütüphane ile geliyor. Yani bileşeni kullanabilmek için kütüphaneyi sayfamıza dahil etmemiz gerekiyor.

Ekran Görüntüsü 11: Kütüphaneyi sayfaya dahil etmek.

Eklediğim bileşenlerden birincisi hemen en üstte gelen soruya ait. Animated.View bileşenlerinde animation, delay gibi parametreler kullandım. Animation ile bu bileşenin ekrana hangi animasyon ile giriş yapacağını, delay parametresiyle de uygulama ekranı geldikten sonra ne kadar bekleyip bu animasyonu tetikleyeceğini belirledim. Cevaplarda da yine benzer bir yapı kullandım. Buna ek olarak yukarıda belirtmiş olduğum gibi bir backgroundColor değişkeni kullandım. (wrongAnswerStyle/trueAnswerStyle)

Ekran Görüntüsü 12: Bekleme ve Yeniden Başlama ekranları.

Son ekran görüntüsündeki bölümde ise bir tanesinde buton olmak üzere iki sade ekran hazırladım. Sonuç ekranında puan yazdırmadım ama yeni bir değişken tanımlayıp puan bilgisini de ekranda gösterebilirsiniz. Eklediğim buton ile restartGame değişkenini true olarak güncelledim ve kullanıcıyı oyuna tekrar baştan başlattım.

İki soru arasındaki geçiş ekranında ise sadece statik olarak metin ekleyip kullanıcıyı 3 saniye kadar bu sayfada beklettikten sonra yeni sayfaya yönlendirdim. Yazının başında da söylediğim gibi bu sayfa opsiyonel.

Bu iki ekranda da yine ilk ekranda olduğu gibi animasyon ekleyip kısa kısa bekleme süreleri koydum. Bunun dışında yeni bir bileşen veya kütüphaneden faydalanmadım. Sadece ilk başta belirtmiş olduğum react-native-animatable kütüphanesi ile basit bir soru ekranı oluşturdum. Daha önce blogda tanıtmış olduğum Kelime kartları uygulamasına epeydir bir quizz ekranı oluşturmayı düşünüyordum. Bu vesileyle bu ekranın da temelini oluşturmuş oldum 🙂

Expo Linki: exp://exp.host/@tolgacinars/QuestionApp

Github Linki: https://github.com/cinarrtolga/rn-quiz-screen

Uygulamaya ait ekran görüntüleri ise aşağıdaki gibidir.

Start the Discussion!

Your email address will not be published. Required fields are marked *