Huawei Kitleri ile React Native 2: Site Kit, Map Kit, Location Kit, Typescript, Navigation

Merhaba önceki yazımda Huawei kitlerini React Native projesinde kullanarak temeli atmıştık buraya tıklayarak ulaşabilirsiniz şimdi ise yazımızın 2.kısmına geçelim.


Öncelikle kullandığımız kitlere yönelik bir alışveriş uygulaması geliştirebileceğimizi düşündüm bundan dolayı ilk öncelikle Splash Screen oluşturacağız.



Splash screen'de Lottie Animasyonu'nu kullandık. Ben kendi Lottie animasyonumu oluşturdum. (Adobe After Effect ve Bodymovin) Sizde isterseniz kendi Lottie Animasyonunuzu oluşturarak kullanabilirsiniz. Benim oluşturduğum animasyon AutoLoop'u desteklemediğinden dolayı Animated.timing kullandık LottieView'ı React-Native projelerinizde kullanmak için buraya tıklayarak bu konu hakkında detaylı bilgiye ulaşabilirsiniz.


Splash Screen'ı hallettikten sonra sırada bir OnBoarding ekranı oluşturmamız gerekiyor. OnBoarding ekranı uygulamaya giriş yaptığımızda uygulamayı tanıtan ekrana denir.


OnBoarding ekranı işlemi detaylı ve uzun bir işlem olacaktır bunun için Youtube'da faydalandığım video için buraya tıklayabilirsiniz.


Öncelikle OnBoarding ekranımız ve ekranımızda kullandığımız Componentler için TypeScript kullanacağız.






OnBoading ekranımızda bulunanları sırasıyla anlatayım. Öncelikle OnBoarding ekranımız bir slider ve subslider'dan oluşuyor.



Subslider'ın içinde bulunan componentler button, iki tane text ve ekranın ortasında bulunan dot dediğimiz hangi slider'da olduğumuzu belirten noktalar.



Slider'da ise background'da picture, color, text kullandık.













Öncelikle Component'lerimizi oluşturmaya başlayalım ilk olarak Button oluşturalım:



Burada variant property'e göre butonumuzun rengi ve text'i değişecektir. Touchable opacity kullanmamızın sebebi Android platformu ile tamamen uyumlu çalışması için.


Bunun yanı sıra Dot component'imiz için:



Subslide Component oluşturmamız bittiğine göre Subslide class'ımızı oluşturabiliriz.


O zaman Subslide class'ımızı oluşturalım:



Burada ise Button component'ine gerekli parametreleri gönderiyoruz. Bunun yanı sıra bir header text ve description text oluşturduk.


Sırada ise Slider class'ımızı oluşturmak var:



Slide class'ın da ise componentlerin boyutlarını belirlemek için Dimensions kütüphanesinden destek alıyoruz. Bunun yanı sıra textleri 90 derece ileri veya geri çevirmemizin bir sebebi ise şu:


Dikkat ettiyseniz textlerimiz bir solda bir sağda bunu sağlamak için dereceleri kullandık.



Sırada ise OnBoarding class'ımızı oluşturmak var:



OnBoarding ekranında Slider animasyonu için react-native-reanimated adında bir kütüphaneden destek alıyoruz. Typescript olduğu için .js uzantılı dosyalarda navigate methodunu direk kullanamıyoruz ancak typescriptlerde bu şekilde kullanım mümkün.




Login ekranımızda küçük değişiklikler yaptım ancak buna değinmeyeceğim github'ta bulabilirsiniz 😊




Görmüş olduğunuz üzere yanları yumuşatıp renkleri değiştirdim bir sonraki yazımda ise ne yapacağıma karar vereceğim 😅















Peki ya Huawei Kitleri ile yeni bir şeyler yaptık mı?


Evet tabii ki 🥳 HMS Location, Map, Site kit kullanarak konumumuza yakın alışveriş merkezlerini bize gösterecek bunun yanı sıra arama çubuğunda yerleri aramamızı sağlayacak olan ekranı gelin birlikte oluşturalım. İlk yazımda eğer ki Map kit'i entegre ettiyseniz aynı şekilde Location ve Site kit'i Npm.js üzerinden yükleyip işlemlere başlayabilirsiniz 😊


Kodumuz uzun bir kod, bundan dolayı öncelikle bir ferman göreceksiniz 😅 bundan dolayı kodu bir diğer sekmede açıp, açıklamalarımı diğer sekmeden okuyarak gitmenizi rica ederim 😊



Kullandığım searchBar'da iconlar çıkmamış bunun üzerinde çalışacağım react-native-icons ile bu sorunu ben çözümleyemedim bilginiz olsun.


Size temel senaryoyu anlatayım:

  1. Konum izni olup olmadığına bakıyoruz. (Location Kit)

  2. İzne göre konum alıyoruz. (Location Kit)

  3. Konum bilgilerimize göre yakınımızda bulunan alışveriş merkezlerinin bilgilerini alıyoruz. (Site Kit)

  4. Aynı zamanda Searchbar'da arama yaparken konumumuza en yakın olan yerleri bize gösterecektir. (Site Kit)

  5. Daha sonra Site Kit'ten aldığımız yer bilgilerini Map Kit'te Marker olarak set ediyoruz. (Map Kit)

  6. Marker'lara tıklanınca adının çıkması için InfoWindow kullanıyoruz. (Map Kit)


Temel olarak bu şekilde diyebilirim tabii Clustrable özelliğide bulunmakta siz parmağınızı kıstırdığınızda harita uzaklaşır ve yerler tek bir nokta haline gelir 😊



Bu yazım biraz uzun bir yazı oldu ancak sizin istekleriniz ve tavsiyeleriniz doğrultusunda yazıya yön verebilirim. Okuduğunuz için teşekkür ederim. Herhangi bir sorunla karşılaşmanız durumunda benimle iletişime geçebilirsiniz. Görüşmek üzere sağlıklı kalın 😷


Github reposu: https://github.com/can-sevin/Hms_Shopping_RN


Referanslar:


React-Native için yararlandığım Youtube Kanalı için tıklayabilirsiniz

Huawei React-Native kitleri için tıklayabilirsiniz


#huawei #reactnative #SiteKit #MapKit #LocationKit #Typescript #Navigation

0 yorum

Komünite

Platform

Mobiler.dev Anasayfa
  • Twitter
  • Instagram
  • development_düzenlendi_düzenlendi
  • Youtube
  • slack-icon-black_edited_edited_edited
  • Gri LinkedIn Simge
imageedit_2_9667998092.png
JetBrains Hakkında Detaylı Bilgi Alın

© 2020 by mobiler.dev

Kurumsal Yazar Hesapları

adesso.png
mobilerdevLogo.jpg
Yazarlık Başvurusu Hakkında Bilgi Alın, Başvuru Yapın.
Topluluk Yazarlarını Tanıyın