Props in React Native

Props ("properties") sind der einzige Weg, wie eine Elternkomponente Daten an eine Kindkomponente weitergibt – sie funktionieren in React Native GENAUSO wie in React für das Web, hier aber am Beispiel typischer nativer Anwendungsfälle vertieft.

1. Beschreibung

Props sind schreibgeschützt (READ-ONLY) aus Sicht der empfangenden Komponente – sie werden nie direkt verändert, sondern nur über neue Werte aus der Elternkomponente ersetzt. Neben einfachen Werten können auch FUNKTIONEN als Props übergeben werden ("Callback-Props"), womit Kinder Ereignisse nach oben melden können.

2. Kurzes Beispiel

function Begruessung({ name, farbe = 'black' }) {
  return <Text style={{ color: farbe }}>Hallo, {name}!</Text>;
}

<Begruessung name="Anna" farbe="blue" />

3. Komplettes Projekt: Wiederverwendbare Bewertungskarte

npx create-expo-app props-demo
cd props-demo

components/BewertungsKarte.js

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

// children: Text/Elemente, die zwischen den öffnenden/schließenden Tags stehen
// onDetails: Callback-Prop - eine Funktion, die die Karte selbst nicht kennt, nur aufruft
function BewertungsKarte({ titel, sterne = 0, children, onDetails }) {
  return (
    <View style={styles.karte}>
      <Text style={styles.titel}>{titel}</Text>
      <Text style={styles.sterne}>{'★'.repeat(sterne)}{'☆'.repeat(5 - sterne)}</Text>
      {children}
      {onDetails && (
        <Text style={styles.link} onPress={onDetails}>
          Details anzeigen
        </Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  karte: { backgroundColor: '#f3f4f6', padding: 16, borderRadius: 10, marginBottom: 12 },
  titel: { fontSize: 16, fontWeight: 'bold' },
  sterne: { color: '#f59e0b', marginVertical: 4 },
  link: { color: '#2563eb', marginTop: 8 },
});

export default BewertungsKarte;

App.js

import { View, Text, Alert, StyleSheet } from 'react-native';
import BewertungsKarte from './components/BewertungsKarte';

export default function App() {
  return (
    <View style={styles.container}>
      <BewertungsKarte
        titel="Wanderschuhe"
        sterne={4}
        onDetails={() => Alert.alert('Details', 'Weitere Infos zu den Wanderschuhen.')}
      >
        <Text style={styles.text}>Bequem auf langen Touren.</Text>
      </BewertungsKarte>

      <BewertungsKarte titel="Regenjacke" sterne={5}>
        <Text style={styles.text}>Wasserdicht bis 10.000mm.</Text>
      </BewertungsKarte>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 16 },
  text: { color: '#374151' },
});

4. Erklärung

sterne = 0 im Destrukturierungs-Muster der Funktionsparameter – ein DEFAULT-Wert für Props, die der Aufrufer weglassen darf.
children ist eine SPEZIELLE, automatisch befüllte Prop – alles, was zwischen <BewertungsKarte>...</BewertungsKarte> steht, landet hier, ohne dass es explizit als children={{...}} übergeben werden muss.
onDetails ist eine CALLBACK-Prop – die Karte selbst weiß nichts über Alert.alert(), sie ruft nur die übergebene Funktion auf; das macht die Komponente wiederverwendbar für JEDE Art von "Details"-Aktion.
Zweite Karte übergibt kein onDetails – der Link wird dank {{onDetails && (...)}} dann automatisch NICHT gerendert, statt einen Fehler zu werfen.

5. Ausgaben

Ausgabe

Zwei graue Karten. Karte 1 ("Wanderschuhe"): vier gefüllte, ein leerer Stern, Text "Bequem auf langen Touren.", darunter ein blauer "Details anzeigen"-Link, der bei Antippen eine native Alert-Box öffnet. Karte 2 ("Regenjacke"): fünf gefüllte Sterne, Text "Wasserdicht bis 10.000mm.", KEIN Details-Link.