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.