React Native | Local Image ve URL Üzerinden Image

Bir uygulama geliştirirken en çok bizi uğraştıran konulardan bir tanesi imageview’lar ile çalışmak .React native’de bu işler biraz daha kolay olabiliyor .Şimdi en temel özelliklere bakalım:

Local Image Dosyaları İle Çalışmak

Projemizde kullanılmak üzere proje dosyamıza önce resimleri import etmemiz gerek.Bunun için önce 2 adet Directory oluşturuyorum.(Src>images) olarak 2 dizin yaptım siz farklı bir isim verebilirsiniz:

Şimdi ilk olarak Image kullanacağımız için bu kütüphaneyi import edin ve ardından image dosyasının yolunu göstereniz.Bu yol gösterme yolunu herhangi bir komponent için uygulayabilirsiniz biz burada view objemin içinde kullandık siz başka bir desteklenen komponent üzerinde ekleyebililirsiniz:

  • reStil ile iamge dosyama bie genişlikte yükseklik verdim.
  • source ile dosya yolunu gösterdim.

Şimdi bu şekilde bir çıktımız var :

ResizMode (Görüntüleme Modu)

Şimdi dikkat ederseniz görsel çok uyumsuz oldu.işte bunun için hem genişlik ve yükseklik ayarını orantılı yapmak gerek hemde görüntüleme modlarından faydalanmak gerek:

Çerçeve, ham görüntü boyutlarıyla eşleşmediğinde görüntünün nasıl yeniden boyutlandırılacağını belirler. Varsayılan değer cover.

  • COver:Görüntünün en boy oranın koruyarak görüntüyü eşit olarak şekillendirmeye çalışır.
  • contain: Görüntünün her iki boyutunun da (genişlik ve yükseklik), görünümün karşılık gelen boyutuna (eksi dolgu) eşit veya daha küçük olması için görüntüyü eşit şekilde ölçekleyin 
  • stretch: Genişliği ve yüksekliği bağımsız olarak ölçekleyin. Bu, src’nin en boy oranını değiştirebilir.Lakin ortaya çok saçma bir durum çıkabilir.
  • repeat: Görünümün çerçevesini kaplamak için görüntüyü tekrarlayın.
  • center: Görüntüyü görünümde her iki boyutta ortalayın. Görüntü görünümden daha büyükse, görünümde yer alması için tek tip olarak küçültün.

URL Üzerinden Görsel Göstermek

Şimdi url üzerinden görsel nasıl gösteririm buna bakalım:

Leave a Reply

*