React baut Weboberflächen aus HTML-Elementen; React Native baut iOS- und Android-Apps aus nativen Views. Sieh dir zu jedem Web-Element das native Gegenstück an und was du teilen kannst.
React ist die Bibliothek; React Native nutzt sie, um iOS- und Android-Apps zu bauen. Mit React im Web renderst du HTML-Elemente wie div und button in eine Browserseite. React Native rendert eigene Komponenten wie View und Text, die zu echten Plattform-Views werden. Komponenten, Props, State und Hooks funktionieren in beiden gleich.
Direkter Vergleich
Am schnellsten erkennst du den Unterschied, wenn du ein Web-Element in sein natives Gegenstück übersetzt. Suche in der Zuordnung unten nach einem HTML-Tag, einer Prop oder einer CSS-Gewohnheit, und jede Zeile zeigt den Ersatz in React Native mit einem kurzen Hinweis, was sich anders verhält.
Nein. React ist die Komponentenbibliothek; React Native ist ein Framework, das React nutzt, um native mobile Views zu steuern. Du schreibst Komponenten auf dieselbe Weise, renderst aber View, Text und andere native Komponenten statt HTML, und es gibt kein Browser-DOM.
Nicht direkt. Es gibt keine div- oder span-Elemente und keine CSS-Dateien. Styles sind JavaScript-Objekte mit camelCase-Namen, die CSS größtenteils nachbilden, und das Layout nutzt flexbox mit ein paar anderen Standardwerten.
In den meisten Fällen zuerst React. Die Dokumentation von React Native setzt Komponenten, JSX, Props und State von React als Grundlage voraus, und wenn du sie im Web übst, bekommst du schneller Feedback.
Die Logik lässt sich teilen: Typen, API-Clients, Validierung und Hooks, die das DOM nicht berühren. Screens und Komponenten meist nicht, weil sie unterschiedliche Primitive rendern.
Ja. Die Dokumentation von React Native erklärt, dass es zur Laufzeit die passenden Android- und iOS-Views für seine Komponenten erzeugt, sodass eine View zu einer nativen View wird und nicht zu einer Webseite in einem Wrapper.
Die Komponentenlogik ist identisch: dieselben Props, derselbe useState-Aufruf, derselbe Handler. Nur die Elemente und das Styling ändern sich.
HTML-Elemente, eine CSS-Klasse und onClick. Der Browser setzt den Button hinter den Text.
View, Text und Pressable aus react-native, Styles aus StyleSheet.create und onPress statt onClick.
FlatList rendert nur, was in der Nähe des Bildschirms ist, wodurch lange Listen flüssig bleiben. keyExtractor übernimmt die Rolle der key-Prop.
Ein Container mit flexbox-Layout, Style und Touch-Verarbeitung. Er scrollt nicht.
Jeder Text muss in Text stehen. Verschachtelter Text erbt Styles; es gibt keine Überschriften-Tags.
Bilder aus dem Netz brauchen eine explizite Breite und Höhe. Lokale Dateien nutzen require().
onChangeText übergibt direkt den neuen String statt eines Events.
Die Prop multiline erlaubt mehrere Textzeilen.
Verbirgt den eingegebenen Text. Funktioniert nicht zusammen mit multiline.
Eine kontrollierte boolesche Eingabe: Aktualisiere value über onValueChange.
Button nimmt eine title-Prop; Pressable umschließt beliebige Kinder, die antippbar werden sollen.
Pressable bietet außerdem onPressIn, onPressOut und onLongPress.
Rendert alle Kinder auf einmal, nutze es also für kurze Inhalte.
Rendert lange Listen effizient. Braucht data und renderItem; keyExtractor setzt jeden Key.
Öffnet die URL mit einer installierten App wie dem Browser. Umschließe es mit einem Pressable für einen antippbaren Link.
Styles sind Objekte, meist mit StyleSheet.create definiert. Übergib ein Array, um sie zu kombinieren; das letzte gewinnt.
Style-Namen sind camelCase, wie bei der style-Prop von React im Web.
Jede View ist ein Flex-Container und stapelt ihre Kinder vertikal, sofern nichts anderes angegeben ist.
Element, Prop oder CSS-Idee suchen
img, onClick, class...
{n} von {v} Zeilen angezeigt
Keine Treffer. Versuche einen Tag-Namen wie div oder input.
Web-Elemente und ihre Gegenstücke in React Native
React im Web
React Native
Was sich ändert
Kostenlos starten · Keine Kreditkarte nötig