React Native bietet einen Satz Kernkomponenten — wie View, Text, Image, ScrollView, TextInput — die sich auf native UI-Elemente abbilden. Sie sind die fundamentalen Bausteine von React Native-UIs und werden anstelle von Web-HTML-Elementen verwendet.
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
Das Verständnis der Kernkomponenten ist für die React Native-Entwicklung grundlegend, da sie die Bausteine jeder React Native-UI sind — Sie komponieren sie, um Oberflächen zu erstellen, daher handelt es sich um unverzichtbares Grundwissen.
React Native stellt seine eigenen Komponenten bereit, die zu nativen Ansichten abgebildet werden (nicht zu Web-HTML-Elementen), und das Verständnis der wesentlichen Komponenten — View (der Container wie ein div), Text (für alle Text mit der wichtigen Regel, dass sich jeglicher Text in einer Text-Komponente befinden muss, anders als im Web), Image, TextInput, ScrollView, FlatList (für effiziente lange Listen), und touchables/Pressable (zur Bearbeitung von Taps) — ist erforderlich, um eine React Native-UI zu erstellen.
Das Verständnis der Schlüsseldifferenzen zum Web ist besonders wichtig für Web-/React-Entwickler, die zu React Native wechseln: Verwendung von View anstelle von div und Text anstelle von p/span (mit der Regel, dass sich jeglicher Text in Text befinden muss), Styling über die style-Prop anstelle von CSS-Klassen/Dateien, Verwendung von touchables/Pressable für Interaktionen anstelle von onClick, und Verwendung von FlatList für lange Listen (die effizient/lazy rendert) anstelle von Mapping über alles — diese Unterschiede sind häufige Stolpersteine, die das Verständnis der Kernkomponenten klärt.
Die Komponenten komponieren (wie React), um UIs zu erstellen, wobei View als grundlegender Container dient.
Da die Kernkomponenten die Bausteine jeder React Native-UI sind (Sie verwenden sie ständig, um Oberflächen zu konstruieren) und ihr Verständnis und wie sie sich vom Web-HTML unterscheiden, grundlegend für die Erstellung von React Native-Apps ist (besonders für Web-Entwickler), ist das Verständnis der Kernkomponenten wesentlich, grundlegendes React Native-Wissen — das Grundvokabular von React Native UI, notwendig zum Erstellen einer beliebigen Oberfläche und zur Anpassung von Web-React-Wissen an das native Komponentenmodell, eine Kernkompetenz für React Native-Entwicklung.