Wat zijn de kerncomponenten in React Native?

Question

Accepted Answer

React Native biedt een set **kerncomponenten** — zoals **View**, **Text**, **Image**, **ScrollView**, **TextInput** — die aan native UI-elementen worden gekoppeld. Ze zijn de fundamentele bouwstenen van React Native UI's, gebruikt in plaats van web HTML-elementen. ## Kerncomponenten (vs web HTML) ```text React Native uses its OWN components (mapping to native views), NOT HTML: VIEW → a container (like a

) — the basic layout building block TEXT → display text (ALL text must be inside a , unlike web) IMAGE → display images (local or remote) TEXTINPUT → text input field (like an ) SCROLLVIEW → a scrollable container FLATLIST → an efficient scrollable LIST (for long lists — renders lazily) TOUCHABLEOPACITY / PRESSABLE → handle taps (touchable areas) BUTTON → a basic button ``` ## Voorbeeld ```jsx import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native'; function Profile() { return ( {/* container (like a div) */} Ann {/* text MUST be in */} {}}> Submit ); } ``` ## Belangrijkste verschillen met web ```text ✓ Use not

, not

/; ALL text must be in ✓ No CSS classes/files — STYLING via a style prop (JS objects, StyleSheet) — see styling ✓ Touchables/Pressable for interactions (not onClick on divs) ✓ FlatList for long lists (efficient) — not mapping over everything ``` ## Waarom het belangrijk is Inzicht in de kerncomponenten is fundamenteel voor React Native-ontwikkeling omdat **ze de bouwstenen van elke React Native UI zijn** — je stelt ze samen om interfaces te bouwen, dus het is essentiële basiskennis. React Native biedt zijn **eigen componenten** die aan native views worden gekoppeld (in plaats van web HTML-elementen), en inzicht in de essentiële — **View** (de container, zoals een div), **Text** (voor alle tekst, met de belangrijke regel dat alle tekst in een Text-component moet zitten, anders dan op web), **Image**, **TextInput**, **ScrollView**, **FlatList** (voor efficiënte lange lijsten), en touchables/**Pressable** (voor het afhandelen van taps) — is nodig om elke React Native UI te bouwen. Inzicht in de **belangrijkste verschillen met web** is bijzonder belangrijk voor web/React-ontwikkelaars die overstappen naar React Native: View in plaats van div en Text in plaats van p/span gebruiken (met de all-text-in-Text-regel), styling via de style prop in plaats van CSS-klassen/bestanden, touchables/Pressable voor interacties gebruiken in plaats van onClick, en **FlatList voor lange lijsten** gebruiken (die efficiënt/lui rendert) in plaats van alles in kaart brengen — deze verschillen zijn veelvoorkomende struikelblokken die inzicht in de kerncomponenten verduidelijkt. De componenten stellen samen (zoals React) UI's samen, met View als de fundamentele container. Omdat de kerncomponenten de bouwstenen van elke React Native UI zijn (je gebruikt ze constant om interfaces te construeren) en inzicht in hen en hoe ze verschillen van web HTML fundamenteel is voor het bouwen van React Native apps (vooral voor webontwikkelaars), is inzicht in de kerncomponenten essentiële, basiskennis voor React Native — de basiswoordenschat van React Native UI, nodig voor het bouwen van elke interface en voor het aanpassen van web React-kennis aan het native-componentenmodel, een kerncompetentie voor React Native-ontwikkeling.