Hvad er kernkomponenterne i React Native?

Question

Accepted Answer

React Native tilbyder et sæt **kernkomponenter** — som **View**, **Text**, **Image**, **ScrollView**, **TextInput** — som mappes til native UI-elementer. De er de fundamentale byggesten i React Native-brugergrænseflader, bruges i stedet for web HTML-elementer. ## Kernkomponenter (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 ``` ## Eksempel ```jsx import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native'; function Profile() { return ( {/* container (like a div) */} Ann {/* text MUST be in */} {}}> Submit ); } ``` ## Vigtige forskelle fra 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 ``` ## Hvorfor det betyder noget At forstå kernkomponenterne er grundlæggende for React Native-udvikling, fordi **de er byggesten for hver React Native-brugergrænseflade** — du sammensætter dem for at bygge grænseflader, så det er vigtig grundlæggende viden. React Native tilbyder sine **egne komponenter**, som mappes til native views (i stedet for web HTML-elementer), og at forstå de væsentlige — **View** (containeren, som en div), **Text** (for al tekst, med den vigtige regel, at al tekst skal være inden i en Text-komponent, i modsætning til web), **Image**, **TextInput**, **ScrollView**, **FlatList** (til effektive lange lister), og touchables/**Pressable** (til at håndtere taps) — er nødvendigt for at bygge enhver React Native-brugergrænseflade. At forstå **vigtige forskelle fra web** er særligt vigtig for web/React-udviklere, der skifter til React Native: at bruge View i stedet for div og Text i stedet for p/span (med reglen om al-tekst-i-Text), styling via style-egenskaben snarere end CSS-klasser/filer, brug af touchables/Pressable til interaktioner i stedet for onClick, og brug af **FlatList til lange lister** (som gengiver effektivt/udbehørigt) snarere end at kortlægge alt — disse forskelle er almindelige stolpesten, som forståelse af kernkomponenter præciserer. Komponenterne sammensætter (som React) for at bygge brugergrænseflader, med View som den grundlæggende container. Da kernkomponenterne er byggesten for enhver React Native-brugergrænseflade (du bruger dem konstant til at konstruere grænseflader) og at forstå dem og hvordan de adskiller sig fra web HTML er grundlæggende for at bygge React Native-apps (især for webudviklere), er forståelse af kernkomponenterne vigtig, grundlæggende React Native-viden — det grundlæggende ordforråd for React Native UI, nødvendigt for at bygge ethvert interface og for at tilpasse web React-viden til den native komponentmodel, en kernekompetence til React Native-udvikling.