React bouwt webinterfaces uit HTML-elementen; React Native bouwt iOS- en Android-apps uit native views. Zie voor elk webelement de native tegenhanger en wat u kunt delen.
React is de library; React Native gebruikt die om iOS- en Android-apps te bouwen. Met React op het web rendert u HTML-elementen zoals div en button in een browserpagina. React Native rendert eigen componenten, zoals View en Text, die echte platformviews worden. Componenten, props, state en hooks werken in beide op dezelfde manier.
Naast elkaar
De snelste manier om het verschil te zien is een webelement vertalen naar zijn native tegenhanger. Zoek in de kaart hieronder naar een HTML-tag, een prop of een CSS-gewoonte, en elke rij geeft de vervanger in React Native met een korte notitie over wat zich anders gedraagt.
Nee. React is de componentenlibrary; React Native is een framework dat React gebruikt om native mobiele views aan te sturen. U schrijft componenten op dezelfde manier, maar u rendert View, Text en andere native componenten in plaats van HTML, en er is geen browser-DOM.
Niet direct. Er zijn geen div- of span-elementen en geen CSS-bestanden. Styles zijn JavaScript-objecten met camelCase-namen die CSS grotendeels volgen, en de layout gebruikt flexbox met een paar andere standaardwaarden.
Meestal eerst React. De eigen documentatie van React Native leert de componenten, JSX, props en state van React als fundament, en ermee oefenen op het web geeft u snellere feedback.
De logica kan gedeeld worden: types, API-clients, validatie en hooks die de DOM niet aanraken. Schermen en componenten meestal niet, omdat die andere bouwstenen renderen.
Ja. De documentatie van React Native legt uit dat het tijdens runtime de bijbehorende Android- en iOS-views voor zijn componenten maakt, dus een View wordt een native view en niet een webpagina in een omhulsel.
De componentlogica is identiek: dezelfde props, dezelfde useState-aanroep, dezelfde handler. Alleen de elementen en de styling veranderen.
HTML-elementen, een CSS-class en onClick. De browser plaatst de knop na de tekst.
View, Text en Pressable uit react-native, styles uit StyleSheet.create, en onPress in plaats van onClick.
FlatList rendert alleen wat dicht bij het scherm is, waardoor lange lijsten soepel blijven. keyExtractor speelt de rol van de key-prop.
Een container met flexbox-layout, style en verwerking van aanraking. Hij scrollt niet.
Alle tekst moet binnen Text staan. Geneste Text erft styles; er zijn geen kopteksttags.
Afbeeldingen van het netwerk hebben een expliciete breedte en hoogte nodig. Lokale bestanden gebruiken require().
onChangeText geeft de nieuwe string direct door in plaats van een event.
De multiline-prop staat meerdere regels tekst toe.
Verbergt de getypte tekst. Werkt niet samen met multiline.
Een gecontroleerde booleaanse invoer: werk value bij vanuit onValueChange.
Button neemt een title-prop; Pressable omhult alle kinderen die u tikbaar wilt maken.
Pressable biedt ook onPressIn, onPressOut en onLongPress.
Rendert al zijn kinderen tegelijk, dus gebruik het voor korte content.
Rendert lange lijsten efficiënt. Heeft data en renderItem nodig; keyExtractor stelt elke key in.
Opent de URL met een geïnstalleerde app zoals de browser. Omhul het met een Pressable voor een tikbare link.
Styles zijn objecten, meestal gedefinieerd met StyleSheet.create. Geef een array door om ze te combineren; de laatste wint.
Stylenamen zijn camelCase, zoals in de eigen style-prop van React op het web.
Elke View is een flex-container en stapelt kinderen verticaal, tenzij anders aangegeven.
Zoek een element, prop of CSS-idee
img, onClick, class...
{n} van {v} rijen getoond
Niets gevonden. Probeer een tagnaam zoals div of input.
Webelementen en hun tegenhangers in React Native
React op het web
React Native
Wat verandert
Gratis beginnen · Geen creditcard nodig