ImageBackground

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.

Örnek çözümü göster

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;

Kendini test et

ImageBackground neyi çocuk alabilir?
- Metin veya View gibi çocuklar
- Yalnızca renk
- Yalnızca sayı
- Yalnızca boş değer
Cevabı göster

Yalnızca sayı — ImageBackground açılış kapanış etiketlidir, çocuk alır.

ImageBackground içe aktar

import { ____ } from 'react-native';

Cevabı göster

import { ImageBackground } from 'react-native';

ImageBackground parçaları

source

Arka plan görseli
children

Ön plandaki öğeler
style

Kutu boyutu
color: white

Metin rengi

Sıradaki ders: Görsel boyut

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler