React Native İle Resim Ekleme

tarihinde gönderilmiş tarafından

React Native ile oluşturduğunuz projelerinizde sayfaya resim eklemek text componenti eklemek kadar kolay işlemi sırayla anlatacak olursak

Öncelikle Image componentini import edelim

 

import {Image} from 'react-native'

componenti import ettik sıra uygulamaya resim eklemeye geldi bu işlem için

 

<Image source={require('./assets/resim.png')} />

şeklinde ekleme sağlayabiliriz eğer eklemek istediğimiz resim bir bileşen değilde URL ise bu işlem için aşağıdaki yapıyı kullanmalıyız

 

<Image source={{uri:'https://www.brkdgn.com/resim.png'}} />

resim ekleme işlemi bu kadar kolay ancak bu eklenen resmin görünmesi lazım bunun içinde boyutlandırma yapmalıyız bu işlem için iki yöntem var bir cihazın ekran genişliğine yaymak birde kendimizin width height değeri vermesi ben genellikle cihaz genişliği kadar genişlik atıyorum yüksekliğide ihtiyacım olduğu kadarını tabi bu atama işlemlerini logo alanında ve sayfa altı resimlerde gerçekleştiriyorum bir profil resmi koyarken cihaz genişliği kadar verilen genişlik fazla olacaktır, şimdi style ataması gerçekleştirelim ,

<Image source={...} style={{width:200,height:200,resizeMode:'contain'}} />

burada 200 yükseklik 200 de genişlik verdik resmide verdiğimiz bu ölçülerin ortasına sığacak şekilde olmasını sağlamak için resizeMode alanına “contain” atadık resizeMode 3 farklı değer almaktadır contain,cover,repat

 

birde cihazın genişlik yükseklik değerlerini alalım bu değerlerle resime atama yapalım öncelikle Dimensions componentini ekliyoruz

import {Dimensions} from 'react-native'

sonrasında const ataması yapıyoruz yani yükseklik ve genişlik değerlerini alıyoruz ,

const {width,height} = Dimensions.get('window')

bu atama işlemi sonrasında dilediğimiz yerde aşağıdaki örnekteki gibi kullanabiliriz

<Image source={...} style={{width:width,height:height,resizeMode:'contain'}} />