ImageBackground
- React Native kursu
- Başlangıç
- Ders 68/116
- 5 dk
ImageBackground ile arka plan görseli öğrenirsin.
ImageBackground nedir?
ImageBackground bir görselin üzerine metin ya da başka bileşenler yerleştirmeyi sağlar. Image gibi source alır; ayrıca çocuk öğelere izin verir.
Tipik kullanım: <ImageBackground source={'{...}'}> açılır, içine <Text> veya <View> konur, sonra </ImageBackground> ile kapatılır. Görsel arkada, çocuklar önünde görünür.
Image'den farkı: Image boş etikettir (/> ile biter), ImageBackground ise kapsayıcıdır (açılış ve kapanış etiketiyle). Bu yüzden children alabilir.
ImageBackground kullanımı
ImageBackground source ve style prop'larını alır. Stil olarak genişlik ve yükseklik vermek zorundasın; yoksa görsel görünmez. Çocuklar otomatik olarak görselin üstünde konumlanır.
Örnek: <ImageBackground source={'{ uri: 'https://.../bg.png' }'} style={'{ width: 300, height: 200 }'}> aç, içine <Text style={'{ color: 'white' }'}>Merhaba</Text> yaz. Metin görselin üstünde beyaz görünür.
Okunabilirliği artırmak için yarı saydam bir katman eklenebilir. Bunu rgba renkleriyle ya da ikinci bir <View> ile yaparsın.
Uygulama Arka plan görselli kart yaz
Bir <ImageBackground> yaz. source olarak {`{ uri: 'https://example.com/bg.png' }`} ver, style ile width: 300 ve height: 200 ekle. İçine beyaz renkli bir <Text> koy. App fonksiyonunu dışa aktar.
Başlangıç kodu
import { ImageBackground, Text } from 'react-native';
// arka plan görselli kartı buraya yazÖrnek çözüm
function App() {
return (
<ImageBackground
source={{ uri: 'https://example.com/bg.png' }}
style={{ width: 300, height: 200 }}>
<Text style={{ color: 'white' }}>Merhaba</Text>
</ImageBackground>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 ImageBackground neyi çocuk alabilir?
- Metin veya View gibi çocuklar
- Yalnızca renk
- Yalnızca sayı Doğru cevap
- Yalnızca boş değer
Açıklama: ImageBackground açılış kapanış etiketlidir, çocuk alır.
2 ImageBackground içe aktar
import { ____ } from 'react-native';import { ImageBackground } from 'react-native';Açıklama: ImageBackground react-native paketinden alınır.
3 ImageBackground parçaları
| Kavram | Anlamı |
|---|---|
source |
Arka plan görseli |
children |
Ön plandaki öğeler |
style |
Kutu boyutu |
color: white |
Metin rengi |