React Native dostarcza zestaw podstawowych komponentów — takich jak View, Text, Image, ScrollView, TextInput — które mapują się na natywne elementy UI. Są to fundamentalne bloki budowlane interfejsów React Native, używane zamiast webowych elementów HTML.
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
Rozumienie podstawowych komponentów jest fundamentalne dla developmentu React Native, ponieważ są to bloki budowlane każdego interfejsu React Native — komponujesz je, aby budować interfejsy, więc jest to niezbędna wiedza podstawowa.
React Native dostarcza własne komponenty, które mapują się na natywne widoki (zamiast webowych elementów HTML), a rozumienie podstawowych z nich — View (kontener, jak div), Text (dla całego tekstu, z ważną regułą, że cały tekst musi być wewnątrz komponenty Text, inaczej niż na web), Image, TextInput, ScrollView, FlatList (dla efektywnych długich list), oraz touchables/Pressable (do obsługi tapów) — jest niezbędne do zbudowania jakiegokolwiek interfejsu React Native.
Rozumienie kluczowych różnic od web jest szczególnie ważne dla developerów web/React przechodzących na React Native: używanie View zamiast div i Text zamiast p/span (z regułą all-text-in-Text), stylowanie poprzez prop style zamiast CSS klas/plików, używanie touchables/Pressable do interakcji zamiast onClick, oraz używanie FlatList do długich list (które renderują się efektywnie/leniwie) zamiast mapowania wszystkiego — te różnice są częstymi kamyczkami, które rozumienie podstawowych komponentów wyjaśnia.
Komponenty komponują się (jak React) do budowy interfejsów, przy czym View jest fundamentalnym kontenerem.
Ponieważ podstawowe komponenty są blokami budowlanymi każdego interfejsu React Native (używasz ich stale do konstruowania interfejsów) i rozumienie ich oraz tego, jak różnią się od webowych elementów HTML, jest fundamentalne dla budowania aplikacji React Native (szczególnie dla developerów web), rozumienie podstawowych komponentów jest niezbędną, podstawową wiedzą React Native — podstawowym słownikiem UI React Native, niezbędnym do budowania każdego interfejsu i do adaptacji wiedzy web React do natywnego modelu komponentów, kluczowa kompetencja dla developmentu React Native.