Özet - Görseler

Image, source ve resizeMode'u birleştirerek bir profil görseli yazarsın.

Özet - Görseler

Bu grupta görsellerin temelini öğrendin. Image bileşeni görseli gösterir; source uzak için uri, yerel için require alır. resizeMode ise görselin kutuya nasıl sığacağını belirler.

ImageBackground görselin üzerine çocuk yerleştirmeyi sağlar. width, height ve aspectRatio ile boyutlama yaparsın. Şimdi iki mini görevle bunları birleştireceksin: önce bir profil görseli, sonra arka plan görselli bir kart.

Uygulama Profil görseli yaz

Bir <Image> yaz. source olarak require('./assets/avatar.png') ver. style ile width: 80, height: 80 ve borderRadius: 40 ekle. App fonksiyonunu dışa aktar.

Örnek çözümü göster

function App() {
  return (
    <Image
      source={require('./assets/avatar.png')}
      style={{ width: 80, height: 80, borderRadius: 40 }}
    />
  );
}
export default App;

Uygulama Arka plan görselli karşılama

Bir <ImageBackground> yaz. source olarak {`{ uri: 'https://example.com/hero.png' }`} ver, style ile width: 320 ve height: 180 ekle. İçine color: 'white' ve fontSize: 24 stilli bir <Text> koy. App fonksiyonunu dışa aktar.

Örnek çözümü göster

function App() {
  return (
    <ImageBackground
      source={{ uri: 'https://example.com/hero.png' }}
      style={{ width: 320, height: 180 }}>
      <Text style={{ color: 'white', fontSize: 24 }}>Hoş geldin</Text>
    </ImageBackground>
  );
}
export default App;

Kendini test et

Tüm görsel kavramlarını eşle

source

Görsel adresi
resizeMode

Sığdırma biçimi
ImageBackground

Arka plan üstü çocuk
aspectRatio

Oran sabitleme
Yerel görsel için ne kullanılır?
- fetch
- uri
- require
- import-css
Cevabı göster

fetch — require yerel dosyayı pakete dahil eder.

Sıradaki ders: useState

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler