Hva er kjernkomponentene i React Native?

Question

Accepted Answer

React Native tilbyr et sett med **kjernkomponenter** — som **View**, **Text**, **Image**, **ScrollView**, **TextInput** — som mapper til native UI-elementer. De er de grunnleggende byggesteinene i React Native UIsene, brukt i stedet for web HTML-elementer. ## Kjernkomponenter (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 ); } ``` ## Viktige forskjeller 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 er viktig Å forstå kjernkomponentene er grunnleggende for React Native-utvikling fordi **de er byggesteinene i hver React Native UI** — du komponerer dem for å bygge grensesnitt, så det er essensielt grunnleggende kunnskap. React Native tilbyr sine **egne komponenter** som mapper til native views (i stedet for web HTML-elementer), og å forstå de viktigste — **View** (containeren, som en div), **Text** (for all tekst, med den viktige regelen at all tekst må være innenfor en Text-komponent, ulikt web), **Image**, **TextInput**, **ScrollView**, **FlatList** (for effektive lange lister), og touchables/**Pressable** (for å håndtere taps) — er nødvendig for å bygge en hvilken som helst React Native UI. Å forstå **de viktigste forskjellene fra web** er spesielt viktig for web-/React-utviklere som går over til React Native: bruke View i stedet for div og Text i stedet for p/span (med regelen om at all tekst må være i Text), styling via style-propen i stedet for CSS-klasser/filer, bruke touchables/Pressable for interaksjoner i stedet for onClick, og bruke **FlatList for lange lister** (som gjengir effektivt/lat) i stedet for å mappe over alt — disse forskjellene er vanlige fallgruver som forståelsen av kjernkomponentene avklarer. Komponentene komponerer (som React) for å bygge UIsene, med View som den grunnleggende containeren. Siden kjernkomponentene er byggesteinene i hver React Native UI (du bruker dem konstant for å konstruere grensesnitt) og forståelsen av dem og hvordan de skiller seg fra web HTML er grunnleggende for å bygge React Native-apper (spesielt for web-utviklere), er forståelsen av kjernkomponentene essensielt, grunnleggende React Native-kunnskap — det grunnleggende vokabularet til React Native UI, nødvendig for å bygge et hvilket som helst grensesnitt og for å tilpasse web React-kunnskap til native komponentmodellen, en kjernekompetanse for React Native-utvikling.