Görsel boyut

width, height ve aspectRatio öğrenirsin.

width ve height

Bir görselin ekranda ne kadar yer kaplayacağını width ve height ile belirlersin. Bu değerler style içinde verilir ve piksel cinsindendir.

Örneğin style={'{ width: 200, height: 200 }'} kare bir görsel oluşturur. Yalnızca width verirsen görsel yükseklik alamaz ve görünmez; ikisi birlikte gerekir.

Yüzde değer de verilebilir: width: '100%' görseli ebeveyn genişliğine yayar. Bu responsive düzenlerde işine yarar.

aspectRatio kullanımı

aspectRatio görselin en boy oranını sabit tutar. Yalnızca width verip aspectRatio: 1 yazarsan görsel otomatik olarak kare olur; height hesaplanır.

Örneğin style={'{ width: 200, aspectRatio: 16 / 9 }'}, genişliği 200 yapıp yüksekliği 200 * 9 / 16 = 112.5 olarak hesaplar. Bu, görselin oranını bozmadan göstermenin en temiz yoludur.

Özellikle uzak görsellerde oranı önceden bilmediğin durumlarda aspectRatio güvenli bir seçimdir; kutu, görsel yüklenmeden önceden doğru boyutu alır.

Uygulama aspectRatio ile kare görsel

Bir <Image> yaz. source olarak {`{ uri: 'https://example.com/pic.png' }`} ver. style içinde yalnızca width: 200 ve aspectRatio: 1 yaz. App fonksiyonunu dışa aktar.

Örnek çözümü göster

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

Kendini test et

Görsel boyutu ekle

import { Image } from 'react-native';

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

Cevabı göster

import { Image } from 'react-native';

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

aspectRatio ne zaman kullanışlı?
- Görseli bulanıklaştırmak
- Görseli gizlemek
- Görseli döndürmek
- Görselin oranını bozmadan boyutlandırmak
Cevabı göster

Görselin oranını bozmadan boyutlandırmak — aspectRatio yüksekliği otomatik hesaplar.
Boyut prop'larını eşle

width

Yatay boyut
height

Dikey boyut
aspectRatio

Oranı sabitler
'100%'

Ebeveyne yayılır

Sıradaki ders: Özet - Görseler

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler