Görsel işleme

Seçilen görseli işleme ve göstermeyi öğrenirsin.

Görsel işleme

Seçilen görselin uri değerini alır ve ekranda gösterirsin. Image bileşeninin source prop'u bir nesne alır: { uri: photoUri }. Bu nesne, görselin yerel dosya yolunu taşır. Galeriden seçilen veya kamerayla çekilen tüm görseller bu şekilde gösterilir.

Görsel yüklendiğinde boyutunu bilirsin: result.assets[0].width ve result.assets[0].height. Bu değerleri stiller için kullanabilirsin. Yüksek çözünürlüklü görselleri küçük göstermek için resizeMode prop kullanılır. cover görseli kabı dolduracak şekilde kırpar, contain ise görseli kabın içine sığdırır.

resizeMode

resizeMode prop'u görselin nasıl boyutlandırılacağını belirler. cover görseli kabın tüm alanına yayar; taşan kısımlar kırpılır. contain görsel boyutunu korur; sığmayan yerler boş kalır. stretch görseli kabın boyuna zorlar; orantı bozulur.

En yaygın seçim cover'dır; görsel tüm kaba yayılır, boş yer kalmaz. Avatar gibi kare görsellerde cover iyi çalışır. Galeri görsellerinde contain daha uygundur; görsel boyutu korunur. resizeMode stillere de eklenebilir: resizeMode: 'cover'.

Uygulama Seçilen görseli göster

Boş showImage işlevini tamamla. Parametre olarak uri alır. return <Image source={{{ uri }}} style={{{ width: 200, height: 200, resizeMode: 'cover' }}}} /> döndür.

Örnek çözümü göster

return (
  <Image
    source={{ uri }}
    style={{ width: 200, height: 200, resizeMode: 'cover' }}
  />
);

Kendini test et

Image source'u yaz

<Image source={____} style={{ width: 200, height: 200 }} />

Cevabı göster

<Image source={{ uri: photoUri }} style={{ width: 200, height: 200 }} />

Yüksek çözünürlüklü görseli kabı dolduracak şekilde göstermek için hangi resizeMode?
```
<Image resizeMode={??} />
```
- repeat
- stretch
- cover
- center
Cevabı göster

cover — cover görseli kabı doldurur; taşanı kırpar.
Alanı anlamına eşle

uri

Görsel yolu
width

Görsel genişliği
height

Görsel yüksekliği
canceled

İptal durumu

Sıradaki ders: Özet - Görsel seçici

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler