React Native İle Yılan Oyunu ( Bölüm 2 )

Yusuf Zeren
Oct 2, 2017 · 2 min read

Bu yazı bir kaç bölümden oluşmaktadır.

Birinci bölüm.

Üçüncü bölüm.

İkinci bölümün source kodlarına şuradaki branch’den erişebilirsiniz:https://github.com/ysfzrn/crazysnake/tree/secondpart


1) Home ekranımızda, gameStore’dan gelecek en yüksek skor bilgisi var. Bu bilgi telefon hafızasında tutulacak. Bunu sağlamak için AsyncStorage’ı kullanabiliriz.

AsyncStorage’da iki temel işlem var. setItem ve getItem.setItem'dan JSON.stringfy kullanmamızın sebebi, AsyncStorage'da yalnızca string ile çalışabiliyoruz. İki temel method da verilen key'e göre sorgu çekiyor. Burada bizim key'imiz "snakeHighScore". Buradaki algoritamanın mantığına gelince, telefon hafızasında, snakeHighScore key'ine sahip bir veri var mı. Varsa onu dön. Yoksa sıfır(0) olarak yeni bir tane oluştur. Çünkü normal olarak kullanıcı oyunu ilk açtığında herhangi bir skora sahip olmayacaktır. Son olarak bize dönen değeri de, this.highScore = _highScore ifadesi ile observable state'imize set ediyoruz.

Şimdi ekranımızın tasarımına geçelim. Ekranlarda ortak ilişkili tutacağım stilleri, bir style dosyasında tutmayı tercih ediyorum. İşimi daha kolaylaştırıyor. Ve daha çok tema opsiyonu nasıl olurmuş diye deneme şansım oluyor. Burada kullanacağımız stil dosyası aşağıdaki olacak.

Burada önemli olarak yılanımızın her bir parçası yani segment’i 10px değerin de olacak. Ve yılanın hareket edeceği board’da herhangi bir uyumsuzluk yaşamaması için, board’ın genişliği, telefonun ekran genişliğine göre şekillenmesi ve width değerinin 10'nun katlarından bir değere sahip olması gerekiyor. Bunun için sharedStyle.js içinde definiteWidth adlı bir method yarattım.

Home ekranımız da aşağıdaki kodda yazıldığı gibi olacak. Bu yazı genel olarak MobX üzerine yazıldığı için kullanılan componentlerin ve ekranların tasarımı üzerinde çok durmayacağım. Ama şunu söylemek zorundayım. Buradaki inject ve observer decoratorlerine dikkat edin.

@observer decoratorü ile bu ekranımızın observable değerlerine göre render edilmesini sağlıyoruz. ( İsimlendirme gayet basit, observable, takip edilen değerler, observer, bu değerleri takip eden demek. )

@inject decoratorü ise MobX’de store elemanlarını componentlerde kullanabilmemizi sağlayan bir diğer yöntem. İlgili store’u burada import edip de kullanabilirdik. Ama ben @inject decoratorünü kullanarak, store elemanlarına direkt erişmek yerine, componentin props’larından erişmeyi tercih ediyorum. Hangi yöntem daha doğru ben de bilmiyorum sadece belki gerektiği zaman lifecycle methodlarını ( componentWillReceiveProps gibi ) kullanmaya ihtiyacım olur diye @inject ile props’dan almak daha mantıklı geliyor.

Artık props üzerinde storelara erişebiliyorum. const { gameStore } = this.props; ile gameStore.highScore'u ScoreTextcomponentine gönderebilirim.

Gelelim PLAY butonuna bastığımızda MobX üzerinden ekranı değiştirmeye. Bu işi yukarıdaki component de handlePlay methodunda yapıyoruz. navigationStore'da yazdığımız, handleChangeRoute methodunu çağırıyoruz. Sadece yaptığı iş navigationStore'da route observable değerini değiştirip, değerini "gameScreen" olarak güncellemek. O da ilk bölümde anlattığımız, root.js içindeki reaction'ı tetikleyip, this.startApp methodunu çağıracak.

İlk ekran için söylenecekler bu kadar, şimdi oyunun ana kısmı olan gameScreen ekranımıza geçelim. Bu bölüm oldukça uzun olacağından bunu 3. bölümde anlatalım.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade