resizeMode
- React Native kursu
- Başlangıç
- Ders 67/116
- 5 dk
resizeMode ile görsel ölçekleme öğrenirsin.
resizeMode nedir?
resizeMode prop'u görselin, verilen kutu içinde nasıl yeniden boyutlandırılacağını belirler. Üç yaygın değer vardır: cover, contain ve stretch.
cover görseli kutuyu dolduracak şekilde büyütür; taşan kenarlar kesilir. contain görseli kutu içine sığdırır; kenarlarda boşluk kalabilir. stretch görseli kutuya orar; oran bozulur.
Yazımı: resizeMode="cover". Varsayılan değer cover'dır. Bu yüzden çoğu durumda ayrıca yazmasan da cover davranışı görürsün.
Hangi mod ne zaman?
Bir kart kapak görseli yapıyorsan cover iyi seçimdir; kutuyu tamamen doldurur, dağınık görünmez. Ürün fotoğrafının tamamı görünsün diyorsan contain kullanırsın.
Arka plan görseli için de cover tercih edilir./stretch nadiren kullanılır; yalnızca desen veya renk bloklarında işe yarar.
Görselin en boy oranı önemliyse asla stretch kullanma; yüzler yamulur, logolar bozulur. Çoğu UI durumunda cover güvenli bir başlangıçtır.
Uygulama Cover görsel göster
200x200 bir <Image> yaz. source olarak {`{ uri: 'https://example.com/cover.png' }`} ver, resizeMode özniteliğine "cover" yaz. App fonksiyonunu dışa aktar.
Başlangıç kodu
import { Image } from 'react-native';
// cover görseli buraya yazÖrnek çözüm
function App() {
return (
<Image
source={{ uri: 'https://example.com/cover.png' }}
resizeMode="cover"
style={{ width: 200, height: 200 }}
/>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 resizeMode değerlerini eşle
| Kavram | Anlamı |
|---|---|
cover |
Kutuyu doldurur, taşar kesilir |
contain |
Tamamı görünür, boşluk kalır |
stretch |
Boyar, oran bozulur |
default |
cover'dır |
2 Tam görsel görünmesi için hangi mod?
- contain
- stretch Doğru cevap
- cover
- repeat
Açıklama: contain görseli kutu içine sığdırır.
3 resizeMode değeri
import { Image } from 'react-native';
function App() {
return (
<Image
source={{ uri: 'cat.png' }}
resizeMode="____"
style={{ width: 200, height: 200 }}
/>
);
}import { Image } from 'react-native';
function App() {
return (
<Image
source={{ uri: 'cat.png' }}
resizeMode="cover"
style={{ width: 200, height: 200 }}
/>
);
}Açıklama: cover kutuyu doldurur.