04.04. Image Styling - Erdinç Uzun

React Native, Image bileşeni üzerine yapılabilecek style işlemini inceleyeceğiz. Resim kaynağı olarak hem local resimleri hem de web sayfasından (url üzerinden) internet üzerindeki resimleri kullanabilme şansımız vardır.

Image bileşenin HTML img öğesinden en büyük farkı içinde diğer bileşenleri içerebilmesidir. Örneğin,

import {Image} from 'react-native';
export default class App extends Component < Props > {
      render() {
        return(
        <Image source={require('./img/resim_local01.jpg')}>
          <View>
          {/* bileşenler... not: view üst satırlarda tanımlanmıştı. */}
          </View>
        </Image>);   
      }
    }

import {Image} from 'react-native';

export default class App extends Component < Props > {

render() {

return(

<View>

{/* bileşenler... not: view üst satırlarda tanımlanmıştı. */}

</View>

</Image>);

}

İlk satırda şu ana kadar kullanmadığımız Image bileşenini ekleyerek başlıyoruz. Text, View ve React ile ilgili diğer bileşenleri daha önce eklemiştik. Image bileşeni içinde View ve diğer bileşenler kullanılabilir. source bölümü /img/ klasöründeki bir jpg dosyasını içermektedir. Bir web sayfası üzerinden de resim ekleyebilirsiniz.

import {Image} from 'react-native';
export default class App extends Component < Props > {
      render() {
        return(
          <Image source={{ uri: 'https://dijivol.com/image/cache/catalog/vol-TUR1006_9x6-300x250.jpg' }}
          style={{ width: 350, height: 150 }}/>
        );   
      }
    }

import {Image} from 'react-native';

export default class App extends Component < Props > {

render() {

return(

<Image source={{ uri: 'https://dijivol.com/image/cache/catalog/vol-TUR1006_9x6-300x250.jpg' }}

style={{ width: 350, height: 150 }}/>

);

}

uri bölümüne resmin url adresi yazılır. Ancak, sık sık göstereceğiniz resimleri için kesinlikle ilk yöntemi öneririm. Eğer resim dinamik olarak konuya göre üretilecekse web adresi üzerinden çekebilirsiniz. Yukarıdaki örnekte yüklenen resim style özelliği de değiştirilmiştir. Ayrıca, stretch, contain, cover, repeat veya center gibi özellikler deneyebilirsiniz.