Görsel boyut
- React Native kursu
- Başlangıç
- Ders 69/116
- 5 dk
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.
Başlangıç kodu
import { Image } from 'react-native';
// aspectRatio'lu görseli buraya yazÖrnek çözüm
function App() {
return (
<Image
source={{ uri: 'https://example.com/pic.png' }}
style={{ width: 200, aspectRatio: 1 }}
/>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Görsel boyutu ekle
import { Image } from 'react-native';
function App() {
return (
<Image
source={{ uri: 'cat.png' }}
style={{ ____: 200, height: 200 }}
/>
);
}import { Image } from 'react-native';
function App() {
return (
<Image
source={{ uri: 'cat.png' }}
style={{ width: 200, height: 200 }}
/>
);
}Açıklama: width görselin yatay boyutunu belirler.
2 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 Doğru cevap
Açıklama: aspectRatio yüksekliği otomatik hesaplar.
3 Boyut prop'larını eşle
| Kavram | Anlamı |
|---|---|
width |
Yatay boyut |
height |
Dikey boyut |
aspectRatio |
Oranı sabitler |
'100%' |
Ebeveyne yayılır |