React Native tillhandahåller en uppsättning kärnkomponenter — som View, Text, Image, ScrollView, TextInput — som mappar till inbyggda UI-element. De är de grundläggande byggblocken för React Native-gränssnitt, som används istället för HTML-element på webben.
React Native uses its OWN components (mapping to native views), NOT HTML:
VIEW → a container (like a <div>) — the basic layout building block
TEXT → display text (ALL text must be inside a <Text>, unlike web)
IMAGE → display images (local or remote)
TEXTINPUT → text input field (like an <input>)
SCROLLVIEW → a scrollable container
FLATLIST → an efficient scrollable LIST (for long lists — renders lazily)
TOUCHABLEOPACITY / PRESSABLE → handle taps (touchable areas)
BUTTON → a basic button
import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native';
function Profile() {
return (
<View style={styles.container}> {/* container (like a div) */}
<Image source={{ uri: 'https://...' }} style={styles.avatar} />
<Text style={styles.name}>Ann</Text> {/* text MUST be in <Text> */}
<TextInput placeholder="Email" />
<TouchableOpacity onPress={() => {}}>
<Text>Submit</Text>
</TouchableOpacity>
</View>
);
}
✓ Use <View> not <div>, <Text> not <p>/<span>; ALL text must be in <Text>
✓ 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
Att förstå kärnkomponenterna är grundläggande för React Native-utveckling eftersom de är byggblocken för varje React Native-gränssnitt — du komponerar dem för att bygga gränssnitt, så det är en måste-kunna grundläggande kunskap.
React Native tillhandahåller sina egna komponenter som mappar till inbyggda vyer (istället för webb-HTML-element), och att förstå de väsentliga — View (behållaren, som en div), Text (för all text, med den viktiga regeln att all text måste vara inom en Text-komponent, till skillnad från webben), Image, TextInput, ScrollView, FlatList (för effektiva långa listor), och touchables/Pressable (för hantering av taps) — är nödvändigt för att bygga något React Native-gränssnitt.
Att förstå de viktigaste skillnaderna från webben är särskilt viktigt för webb-/React-utvecklare som övergår till React Native: att använda View istället för div och Text istället för p/span (med regeln att all text är i Text), styling via style-prop istället för CSS-klasser/filer, att använda touchables/Pressable för interaktioner istället för onClick, och att använda FlatList för långa listor (som renderas effektivt/lazy) istället för att mappa över allt — dessa skillnader är vanliga stolpstenar som förståelsen av kärnkomponenterna klargör.
Komponenterna komponeras (som React) för att bygga gränssnitt, med View som den grundläggande behållaren.
Eftersom kärnkomponenterna är byggblocken för varje React Native-gränssnitt (du använder dem konstant för att konstruera gränssnitt) och att förstå dem och hur de skiljer sig från webb-HTML är grundläggande för att bygga React Native-appar (särskilt för webbutvecklare), är förståelse för kärnkomponenterna väsentlig, grundläggande React Native-kunskap — det grundläggande ordförrådet i React Native UI, nödvändigt för att bygga gränssnitt och för att anpassa webb-React-kunskap till den inbyggda komponentmodellen, en kärnkompetens för React Native-utveckling.