# React Native Resim Kullanımı

> Kaynak: https://www.tasarimrehberi.net/react-native-resim-kullanimi/
> Yazar: Nurettin Sezer
> Yayın: 2020-06-01 · Güncelleme: 2020-06-01

**React Native Resim Kullanımı**

 

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

 

1. 1. Yöntem Local
2. 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.