React Native Komponenten

Jetzt, da wir wissen, wie man das Projekt initiiert, lassen Sie uns zu den Bausteinen übergehen. In React Native, genau wie in React, dienen Komponenten als die grundlegenden Einheiten zur Erstellung der Benutzeroberfläche Ihrer mobilen App. Diese Komponenten sind wiederverwendbare, eigenständige Einheiten, die spezifische Funktionalitäten oder Benutzeroberflächen kapseln.

Lassen Sie uns die React Native-Komponenten erkunden, die während der Entwicklung von mobilen Apps wesentlich sein werden.

Hier sind einige grundlegende Komponenten. Ab dem nächsten Kapitel werden wir jede im Detail untersuchen.

• View: Die grundlegendste Komponente in React Native, ähnlich einem div in der Webentwicklung. Sie wird verwendet, um andere Komponenten zu gruppieren und zu stylen;
• Text: Zeigt Textinhalte an, ähnlich den HTML-<span>- oder <p>-Tags;
• Image: Rendert Bilder, analog zum HTML-<img>-Tag;
• ScrollView: Bietet einen scrollbaren Container, nützlich, wenn Sie mehr Inhalt haben, als auf den Bildschirm passt;
• TouchableOpacity: Eine button-ähnliche Komponente, die Touch-Feedback bietet, verwendet für die Handhabung von Touch-Ereignissen;
• FlatList: Eine Komponente, die zum effizienten Rendern von Datenlisten verwendet wird. Sie ist für Leistung und Speicherverbrauch optimiert, insbesondere für große Listen;
• SectionList: Ähnlich wie FlatList, aber sie ermöglicht es Ihnen auch, Abschnitte mit Überschriften zu rendern, was sie geeignet macht, um kategorisierte Daten anzuzeigen;
• Switch: Stellt eine anpassbare Schalterkomponente dar, die häufig für binäre Ein-/Aus-Zustände verwendet wird;
• ActivityIndicator: Zeigt einen animierten Ladeindikator an, der anzeigt, dass Inhalte geladen oder verarbeitet werden;
• Modal: Eine Komponente, die verwendet wird, um Inhalte über einer umschließenden Ansicht darzustellen. Sie wird oft für Warnungen, Benachrichtigungen oder zur Präsentation zusätzlicher Informationen verwendet;
• TextInput: Bietet eine Möglichkeit für Benutzer, Text einzugeben, ähnlich dem HTML-<input>-Element, und ermöglicht Benutzerinteraktion und Dateneingabe.