React Native Resim Kullanımı

React Native Resim Kullanımı

2 yöntemle uygulamamıza resim yüklüyebiliyoruz.

1. Yöntem Local
2. Yöntem İnternet sitesinden

Öncelikle Image kütüphanesini ekleyin sonrasında eklemek istediğiniz yere <Image> kullanınız.

Örnek : <Image source={require(‘./images/hms.png’)} />

height,width,border gibi özellikleri kullanabilirsiniz.

resize mode var farklı olarak.

Image in kullanabilecek özellikler:

contain defult olarak sağlar
center resmi ortalar ve küçültür.
cover ise bulunduğu elementin içine yayarak sağlar.
repat bulunduğu cercevreye doldurur. windows 98 den hatırlarsınız.
strech elementin boyutuna göre boyutlar. Eğer kare ise resminiz önerilir. Eğer kare değilse boyutunu bozar.
scale : Görüntüyü elemente boyutlar küçük ise büyültür büyük ise küçültür.

image.getsize yaparak boyutlarını alabilirsiniz.

Uzaktaki resimleri çekmek için uri komutu ile kullanıyoruz.

Örnek:

<Image source={{uri: 'https://reactjs.org/logo-og.png'}}
style={{width: 400, height: 400}} />

Local :
<Image source={{ uri: 'hms.jpg' }} />

Eğer icon yapmak isterseniz:
<Image
source={{ uri: 'asset:/app_icon.png' }}
style={{ width: 40, height: 40 }}
/>

Base64 ile yapmak isterseniz (Önermiyorum)
<Image
style={{
width: 51,
height: 51,
resizeMode: ‘contain’
}}
source={{
uri:
‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==’
}}
/>

Andorid ve ios da farklı resimler göstermek isterseniz yapmanız gereken:

Resminiz:
resimismi.png

ios için:
resimismi.ios.png

Android için:
resimismi.android.png

resimlerini oluşturursanız otomatik olarak gösterecektir.