Görsel işleme
- React Native kursu
- İleri seviye
- Ders 17/83
- 5 dk
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.
Başlangıç kodu
import { Image } from 'react-native';
export function showImage(uri) {
// görseli 200x200 kabında cover ile göster
}Örnek çözüm
return (
<Image
source={{ uri }}
style={{ width: 200, height: 200, resizeMode: 'cover' }}
/>
);Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Image source'u yaz
<Image source={____} style={{ width: 200, height: 200 }} /><Image source={{ uri: photoUri }} style={{ width: 200, height: 200 }} />Açıklama: source bir nesne alır; uri görsel yolunu taşır.
2 Yüksek çözünürlüklü görseli kabı dolduracak şekilde göstermek için hangi resizeMode?
<Image resizeMode={??} />- repeat
- stretch
- cover Doğru cevap
- center
Açıklama: cover görseli kabı doldurur; taşanı kırpar.
3 Alanı anlamına eşle
| Kavram | Anlamı |
|---|---|
uri |
Görsel yolu |
width |
Görsel genişliği |
height |
Görsel yüksekliği |
canceled |
İptal durumu |