Button ist React Natives einfachste, eingebaute Schaltfläche – plattformgerecht gestaltet, aber bewusst nur minimal anpassbar.

1. Beschreibung

Button rendert automatisch das native Erscheinungsbild der jeweiligen Plattform (unter iOS z. B. blauer Text ohne Rahmen, unter Android ein gefüllter, farbiger Button) – im Austausch dafür lässt sich nur die color-Prop anpassen, kein eigenes style.

2. Kurzes Beispiel

<Button title="Bestätigen" onPress={() => console.log('Bestätigt!')} />

3. Komplettes Projekt

npx create-expo-app button-demo
cd button-demo

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

export default function App() {
  const [bestaetigt, setBestaetigt] = useState(false);

  function handleBestaetigen() {
    setBestaetigt(true);
    Alert.alert('Erfolg', 'Aktion wurde bestätigt.');
  }

  return (
    <View style={styles.container}>
      <Text style={styles.status}>
        Status: {bestaetigt ? 'Bestätigt ✓' : 'Ausstehend'}
      </Text>
      <Button
        title="Bestätigen"
        color="#16a34a"
        onPress={handleBestaetigen}
        disabled={bestaetigt}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', gap: 16 },
  status: { fontSize: 18 },
});

4. Erklärung

• title – der Pflicht-Text auf dem Button (im Gegensatz zu TouchableOpacity gibt es keine Kind-Elemente, nur diese eine String-Prop).
• color – einzige Möglichkeit, das Aussehen anzupassen: Textfarbe unter iOS, Hintergrundfarbe unter Android.
• onPress – Callback-Funktion, identisch zu allen anderen Touchable-Komponenten.
• disabled – deaktiviert den Button optisch UND funktional (kein onPress mehr möglich), wenn true.

5. Ausgaben