resizeMode

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.

Örnek çözümü göster

function App() {
  return (
    <Image
      source={{ uri: 'https://example.com/cover.png' }}
      resizeMode="cover"
      style={{ width: 200, height: 200 }}
    />
  );
}
export default App;

Kendini test et

resizeMode değerlerini eşle

cover

Kutuyu doldurur, taşar kesilir
contain

Tamamı görünür, boşluk kalır
stretch

Boyar, oran bozulur
default

cover'dır
Tam görsel görünmesi için hangi mod?
- contain
- stretch
- cover
- repeat
Cevabı göster

stretch — contain görseli kutu içine sığdırır.

resizeMode değeri

import { Image } from 'react-native';

function App() {
  return (
    <Image
      source={{ uri: 'cat.png' }}
      resizeMode="____"
      style={{ width: 200, height: 200 }}
    />
  );
}

Cevabı göster

import { Image } from 'react-native';

function App() {
  return (
    <Image
      source={{ uri: 'cat.png' }}
      resizeMode="cover"
      style={{ width: 200, height: 200 }}
    />
  );
}

Sıradaki ders: ImageBackground

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler