React Native furnizează un set de componente principale — cum ar fi View, Text, Image, ScrollView, TextInput — care se mapează la elemente UI native. Sunt blocurile fundamentale de construcție ale interfețelor React Native, folosite în locul elementelor HTML din web.
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
Înțelegerea componentelor principale este fundamentală pentru dezvoltarea React Native deoarece sunt blocurile de construcție ale fiecărei interfețe React Native — le compui pentru a construi interfețe, deci este cunoștințe fundamentale pe care trebuie să le stăpânești.
React Native furnizează propriile sale componente care se mapează la vizualizări native (mai degrabă decât elemente HTML din web), și înțelegerea celor esențiale — View (containerul, ca un div), Text (pentru tot textul, cu regula importantă că tot textul trebuie să fie în interiorul unei componente Text, spre deosebire de web), Image, TextInput, ScrollView, FlatList (pentru liste lungi eficiente), și touchables/Pressable (pentru gestionarea apăsărilor) — este necesară pentru a construi orice interfață React Native.
Înțelegerea diferențelor cheie față de web este deosebit de importantă pentru dezvoltatorii web/React care trec la React Native: folosirea View în loc de div și Text în loc de p/span (cu regula că tot textul trebuie în Text), stilizarea prin prop-ul style mai degrabă decât clase/fișiere CSS, folosirea touchables/Pressable pentru interacțiuni mai degrabă decât onClick, și folosirea FlatList pentru liste lungi (care redă eficient/leneș) mai degrabă decât maparea peste totul — aceste diferențe sunt obstacole comune care înțelegerea componentelor principale le clarifică.
Componentele se compun (ca în React) pentru a construi interfețe, cu View ca container fundamental.
Deoarece componentele principale sunt blocurile de construcție ale fiecărei interfețe React Native (le folosești constant pentru a construi interfețe) și înțelegerea lor și a modului în care diferă de HTML-ul web este fundamentală pentru construirea aplicațiilor React Native (în special pentru dezvoltatorii web), înțelegerea componentelor principale este cunoștințe esențiale, fundamentale React Native — vocabularul de bază al UI-ului React Native, necesar pentru a construi orice interfață și pentru a adapta cunoștințele React din web la modelul de componente native, o competență principală pentru dezvoltarea React Native.