Jetzt bauen wir unsere erste eigene, wiederverwendbare Komponente: ProductCard. Sie wird die Grundlage für unseren Produktkatalog, den wir durch das restliche Tutorial ausbauen. Unser Projekt bekommt dabei seine erste eigene Unterordner-Datei.

Was sind Props?

"Props" (kurz für "properties") sind die Art, wie eine Komponente von außen Daten übergeben bekommt – vergleichbar mit HTML-Attributen wie <img src="..." alt="...">, nur dass Sie bei React-Komponenten selbst bestimmen, welche Props es gibt und was sie bedeuten.

Die ProductCard-Komponente

Legen Sie im Projektordner einen neuen Unterordner components/ mit der Datei ProductCard.js darin an:

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

function ProductCard({ name, price, imageUrl, onPress }) {
  return (
    <TouchableOpacity style={styles.card} onPress={onPress}>
      <Image source={{ uri: imageUrl }} style={styles.image} />
      <View style={styles.info}>
        <Text style={styles.name}>{name}</Text>
        <Text style={styles.price}>{price.toFixed(2)} €</Text>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    padding: 12,
    marginBottom: 8,
    backgroundColor: '#f9fafb',
    borderRadius: 8,
    alignItems: 'center',
  },
  image: { width: 60, height: 60, borderRadius: 4 },
  info: { marginLeft: 12, flex: 1 },
  name: { fontSize: 16, fontWeight: '600' },
  price: { fontSize: 14, color: '#6b7280' },
});

export default ProductCard;

{{ name, price, imageUrl, onPress }} ist "Destrukturierung" – die Komponente holt sich diese vier benannten Werte aus dem Props-Objekt, das beim Verwenden übergeben wird. Der geschweifte Ausdruck {{name}} im JSX bedeutet: "hier den Wert der JavaScript-Variable name einsetzen" – vergleichbar mit einer Template-Engine wie z. B. Twig oder Blade in PHP-Welten ({{ '{{ name }}' }}), nur dass hier echtes JavaScript dahintersteckt.

App.js aktualisieren: die Komponente verwenden

Jetzt ersetzen wir den Inhalt von App.js komplett, importieren ProductCard und übergeben ihr konkrete Beispieldaten:

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

export default function App() {
  return (
    <View style={styles.container}>
      <ProductCard
        name="Wanderschuhe"
        price={89.99}
        imageUrl="https://picsum.photos/200"
        onPress={() => Alert.alert('Angeklickt!', 'Wanderschuhe')}
      />
    </View>
  );
}

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

produktkatalog-app/
├── App.js                     (aktualisiert: importiert ProductCard)
├── app.json
├── package.json
├── components/
│   └── ProductCard.js         ← NEU
└── assets/

Speichern Sie beide Dateien und schauen Sie auf Ihr Handy: Sie sehen jetzt eine echte, klickbare Produktkarte. Jetzt können Sie beliebig viele <ProductCard /> mit unterschiedlichen Props verwenden – genau wie Sie in HTML mehrere <img>-Tags mit unterschiedlichen src-Werten verwenden würden, nur dass hier eine ganze kleine Komponente mit Layout, Bild und Klick-Verhalten wiederverwendet wird.