React Native Serüveni #8 | Flex Wrap |
Hepinize merhaba dostlarım :) Ben Muhammed Fatih
Bildiğiniz üzere #web geliştirme sonrasında android uygulama geliştirmek için tanıştığımız ve bizde artık bağımlılık haline gelen #reactnative teknolojisinden her zamanki gibi bugün de dozumuzu alarak "React Native Serüveni" yolculuğumuza yeni bir bölüm ile ara vermeden devam ediyoruz :)
Bu bölümde sizlerle beraber tasarım konularında olmazsa olmaz bir yapı olan "Flex Wrap" konusuna değiniyoruz. Özellikle #android veya #ios uygulama geliştirirken her cihazın farklı boyutları olduğu için kodladığımız bazı #component yapıları ekranda istediğimiz gibi durmayabilir. Örnek vermek gerekirse uygulamanın dikey pozisyonunda ekrana sığan içerik yatay pozisyonda taşabilir. Tabii bu da kullanıcı deneyimi için çok büyük sıkıntı olarak bizim başımızı ağrıtabilir :). İşte bu durumlarda "React Native" geliştiricilerinin düşündüğü ve bizim için kullanıma sundukları "Flex Wrap" komutu ile bu tip sorunların nasıl çözüldüğünü sizlerle beraber bu videoda gerçekleştiriyoruz :)
Bölüm içerisinde yaptığımız işlemlere genel olarak bakacak olursak:
-- "Flex Direction" yapısını belirterek 2 ayrı container oluşturuyoruz
-- İçerisine belirli genişlikte ve yükseklikte #view oluşturuyoruz. Aynı zamanda bunlara bir arkaplan rengi veriyoruz
-- Ekrandan taşma durumlarını engellemek veya görmezden gelmek için "Flex Wrap" yapısını kullanıyoruz
-- Son olarak taşma durumlarında bir aşağıya otomatik alınan içerikleri ters çevirmek için "Wrap-Reverse" komutunu uyguluyoruz
şeklinde özetleyebiliriz.
İlk başlarda karmaşık veya zor gelebilir dostlarım anlıyorum. Öğrenme süreci içerisinde bu durumlar son derece doğaldır diyebilirim.
İşte bu aşamada sizlerden istediğim tek şey her videomun sonunda dediğim gibi "İstikrarlı ve azimli olmalısınız, bolca pratik yapmalısınız" şeklinde olacaktır. Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır :)
Şimdiden hepinize iyi çalışmalar iyi seyirler dilerim dostlarım :). Videoyu beğenmeyi, kanalıma abone olmayı ve bildirimleri açmayı, takıldığınız yerlerde yorum yapmayı unutmayın.
Projemizin Kodları: https://github.com/turan1302/react-na...
React + Laravel Eğitimleri için:
WebRTC Projesi: https://tls.tc/04JnR
Alışveriş Sepeti Projesi: https://tls.tc/rzCkV
Chat Sistemi Projesi: https://tls.tc/7ePsd
Radyo Çalar Projesi: https://tls.tc/5HITg
React Native Eğitimi için:
https://tls.tc/e5mIM
Sitelerim -
MFSoftware Blog: https://mfsoftware.net/
Seyyar Yazılımcı (Yazılımcı Tartışma Platformu): https://seyyaryazilimci.com/
Sosyal Medya Hesaplarım -
Linkedin: / mfsoftware
Instagram: / mfsoftware.net.tr
React Native Flex Wrap kullanımı
Flex Wrap kullanımı örnekleri
Flexbox Flex Wrap teknikleri
React Native Flexbox eğitimi
Flex Wrap örnekleri React Native
Flex Wrap nedir nasıl kullanılır
How to use Flex Wrap tutorial
Flexbox properties React Native
Flexbox Flex Wrap explained tutorial
React Native layout guide
Mobile app design tutorial
Flexbox alignment techniques
React Native başlangıç rehberi
Flex Wrap rehberi detaylı
Flex Wrap dersi React Native
Flexbox eğitim React Native
Flexbox Flex Wrap kodlama teknikleri
Mobil geliştirme React Native rehberi
Flexbox Flex Wrap training guide
Flex Wrap tips and tricks
React Native Flexbox lessons guide
Flex Wrap techniques and tips
Flexbox arrangements tutorial
Flexbox React Native guide
Flexbox Flex Wrap kullanımı detaylı
Mobil UI Flex Wrap kullanımı
React Native proje örnekleri
Flexbox layout React Native
Flex Wrap video dersi React Native
React Native Flexbox düzenleme rehberi