Arkaplana Resim Ekleme – React Native

React Native’de arkaplana cihazın boyutuyla uyumlu tam ekran resim nasıl ekleyebiliriz onu anlatacağım.

Öncelikle aşağıdaki gibi bir tasarımımız olsun..

Ekran Resmi 2016-01-21 11.29.55Şimdi de buna cihazın boyutu ile uyumlu bir arkaplan resmi ekleyelim.

Bunun için öncelikle cihazın boyutlarını öğrenebileceğimiz kütüphaneyi import ediyoruz. Bunun için herhangi bir npm paketi yüklemenize gerek yok. React Native ile geliyor.

import Dimensions from ‘Dimensions’;

const {height, width} = Dimensions.get(‘window’);

Cihazın boyutlarını değişkenlere aktardık.

Şimdi de container View’inin altına bir Image componenti tanımlayalım.

Burada önemli olan componentin style kısmına position:absolute olarak belirtmemiz. Css ile ilgilenenler bunu daha kolay anlayacaktır. Source kısmında ise aynı dizinde bulunan bg.jpg dosyasını require ettim.

 

<Image
style={{position: ‘absolute’, width:width, height:height, top:0, left: 0}}
source={require(‘./bg.jpg’)}
/>

Sonuç

Ekran Resmi 2016-01-21 11.42.54