Özet - Görseler
- React Native kursu
- Başlangıç
- Ders 70/116
- 5 dk
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.
Başlangıç kodu
import { Image } from 'react-native';
// profil görselini buraya yazÖrnek çözüm
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.
Başlangıç kodu
import { ImageBackground, Text } from 'react-native';
// karşılama kartını buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Tüm görsel kavramlarını eşle
| Kavram | Anlamı |
|---|---|
source |
Görsel adresi |
resizeMode |
Sığdırma biçimi |
ImageBackground |
Arka plan üstü çocuk |
aspectRatio |
Oran sabitleme |
2 Yerel görsel için ne kullanılır?
- fetch Doğru cevap
- uri
- require
- import-css
Açıklama: require yerel dosyayı pakete dahil eder.