React Native Serüveni #19 | Image Background Bileşeni |
Hepinize merhaba dostlarım :) Ben Muhammed Fatih
Her zaman olduğu gibi bu bölümde de sizlerle beraber #reactnative teknolojisinin zihnimize faydalı o güzelim dozlarından alıyoruz ve mobil uygulama geliştirme için çıktığımız bu "React Native Serüveni" yolculuğumuza hız kesmeden devam ediyoruz :).
Bu bölümde sizlerle beraber bir önceki videomuzun devamı niteliğinde olan ve #image kullanım durumlarında neredeyse sıklıkla kullanılan "Image Background" bileşenine değiniyoruz dostlarım :). Özellikle bir #login veya #register sayfasının arka planında görsel kullanmak istersek veya bir #eticaret sistemi kodladığınızı düşünürseniz ürün resimleri üzerinde #stok bildirimi veya önerilen ürün olduğunu, kampanya ürünü olduğu gibi vs. durumlar kullanacağınızda bu bileşeni rahatlıkla kullanabilirsiniz.
Video içerisinde de anlattığım gibi bir önceki bölümde kullandığımız "Image" bileşenini kullanabilirsiniz. Lakin bu durumda projeniz üzerinde #view tasarımlarının bazılarının pozisyon değerini #absolute olarak tanımlamanız gerekecek ve bu da ileride #responsive sıkıntılarını çıkmasına zemin hazırlayacaktır dostlarım (defalarca yaşadım :D). Sizlere tavsiyem eğer böyle bir tasarım yapacaksanız "Image Background" bileşenini direkt entegre edip rahat bir şekilde tasarım yapmanızdan yana olacaktır :)
Bölüm içerisinde yaptığımız işlemlere genel olarak bakacak olursak:
-- App.js içerisini temizledik
-- "Image Background" bileşeninden genel olarak bahsettik
-- "Image Background" bileşenini kullandık ve içerisine yerel dosya ve uzak sunucudan dosya entegre ettik
-- Görselimizin üzerine yazı yazdırma işlemini gerçekleştirdik
-- Bir önceki videoda kullandığımız "Image" bileşeni ile benzer yönleri ve farklı yönlerine değindik
-- Kullanım alanlarına örnek verdik
ş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.
Image Background Bileşeni Dökümanı: https://tls.tc/hGgPM
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
Fast Typing Projesi: https://tls.tc/ZJkfy
Barkod Okuyucu Projesi: https://tls.tc/z07Ap
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 kodlama rehberi
React Native eğitimi videoları
Mobil uygulama geliştirme rehberi
React Native bileşenleri kullanımı
Image Background bileşeni kullanımı
React Native tasarım rehberi
React Native beginners guidebook
Android app development steps
iOS app development tutorials
Mobile UI design tips
React Native step by step
Coding tutorial React Native
React Native arayüz tasarım rehberi
React Native background ayarlama rehberi
Image bileşeni nedir? Nasıl kullanılır?
React Native uygulama yapımı rehberi
React Native görüntü ekleme rehberi
React Native layout yönetimi rehberi
Mobile interface design tips
React Native component usage tutorial
App development process guide
React Native best practices tutorial
Fast app development techniques
React Native background image tutorial
React Native image ayarları rehberi
Gelişmiş React Native dersleri serisi
Görsel arayüz geliştirme rehberi
Mobil uygulama kodlama dersleri
React Native tutorial videosu
Android iOS kodlama rehberi