Anders als im Web gibt es kein CSS-background-image – React Native löst das über die Komponente ImageBackground, die ein Bild UND darüber liegende Kind-Elemente gleichzeitig darstellt.

1. Beschreibung

ImageBackground ist im Kern ein normales Image, das intern seine Kinder absolut über sich selbst positioniert (ähnlich wie CSS position: relative am Container + position: absolute an den Kindern). resizeMode steuert, wie das Bild skaliert wird, wenn es nicht exakt zur Fläche passt.

2. Kurzes Beispiel

<ImageBackground
  source={{ uri: 'https://picsum.photos/800' }}
  style={{ flex: 1 }}
>
  <Text style={{ color: 'white' }}>Über dem Bild</Text>
</ImageBackground>

3. Komplettes Projekt: Profil-Titelbild

npx create-expo-app background-image-demo
cd background-image-demo

import { View, Text, ImageBackground, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <ImageBackground
        source={{ uri: 'https://picsum.photos/id/1015/800/500' }}
        style={styles.header}
        resizeMode="cover"
      >
        <View style={styles.overlay}>
          <Text style={styles.name}>Alex Mustermann</Text>
          <Text style={styles.rolle}>React-Native-Entwickler</Text>
        </View>
      </ImageBackground>
      <View style={styles.inhalt}>
        <Text>Weiterer Profilinhalt folgt hier…</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  header: { height: 220, justifyContent: 'flex-end' },
  overlay: { backgroundColor: 'rgba(0,0,0,0.4)', padding: 16 },
  name: { color: 'white', fontSize: 22, fontWeight: 'bold' },
  rolle: { color: '#e5e7eb', fontSize: 14 },
  inhalt: { padding: 16 },
});

4. Erklärung

• resizeMode="cover" füllt die gesamte Fläche und schneidet überstehende Bildteile ab (wie CSS background-size: cover) – Alternativen: "contain" (ganzes Bild sichtbar, ggf. mit Rand) und "stretch" (verzerrt auf exakte Maße).
• Der halbtransparente overlay-View (rgba(0,0,0,0.4)) sorgt dafür, dass weißer Text auf JEDEM Hintergrundbild lesbar bleibt – eine gängige Technik, unabhängig vom tatsächlichen Bildinhalt.
• justifyContent: 'flex-end' am header schiebt den Overlay-Inhalt an den unteren Rand des Bildbereichs, ein typisches "Hero-Bild mit Titel unten"-Layout.
• Für lokale Bilder statt einer URL: source={{require('./assets/titelbild.jpg')}} (ohne uri-Schlüssel, siehe Kapitel "Fetch lokale JSON-Datei" für den Unterschied zwischen require und Netzwerk-Quellen).

5. Ausgaben