Το React Native παρέχει ένα σύνολο βασικών συστατικών — όπως View, Text, Image, ScrollView, TextInput — που αντιστοιχούν σε εγγενή στοιχεία UI. Είναι τα θεμελιώδη δομικά στοιχεία των UI του React Native, που χρησιμοποιούνται αντί των στοιχείων HTML του 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
Η κατανόηση των βασικών συστατικών είναι θεμελιώδης για την ανάπτυξη React Native επειδή είναι τα δομικά στοιχεία κάθε UI του React Native — τα συνθέτετε για να δημιουργήσετε διεπαφές, επομένως είναι απαραίτητη θεμελιώδης γνώση.
Το React Native παρέχει τα δικά του συστατικά που αντιστοιχούν σε εγγενής views (και όχι σε στοιχεία HTML του web), και η κατανόηση των ουσιαστικών — View (το δοχείο, όπως ένα div), Text (για όλο το κείμενο, με τον σημαντικό κανόνα ότι όλο το κείμενο πρέπει να βρίσκεται μέσα σε ένα συστατικό Text, σε αντίθεση με το web), Image, TextInput, ScrollView, FlatList (για αποδοτικές μεγάλες λίστες), και touchables/Pressable (για τον χειρισμό taps) — είναι απαραίτητο για την δημιουργία οποιασδήποτε UI του React Native.
Η κατανόηση των βασικών διαφορών από το web είναι ιδιαίτερα σημαντική για τους ανάπτυξη web/React που μεταβαίνουν στο React Native: χρήση του View αντί του div και Text αντί του p/span (με τον κανόνα του all-text-in-Text), styling μέσω του style prop αντί των CSS classes/files, χρήση touchables/Pressable για αλληλεπιδράσεις αντί του onClick, και χρήση FlatList για μεγάλες λίστες (που κάνει rendering αποδοτικά/τεμπέλης) αντί του mapping σε όλα — αυτές οι διαφορές είναι συνηθισμένα εμπόδια που η κατανόηση των βασικών συστατικών διευκρινίζει.
Τα συστατικά συνθέτουν (όπως το React) για να δημιουργήσουν UI, με View ως το θεμελιώδες δοχείο.
Επειδή τα βασικά συστατικά είναι τα δομικά στοιχεία κάθε UI του React Native (τα χρησιμοποιείτε συνεχώς για την κατασκευή διεπαφών) και η κατανόησή τους και ο τρόπος που διαφέρουν από το web HTML είναι θεμελιώδης για την δημιουργία εφαρμογών React Native (ιδιαίτερα για τους ανάπτυξη web), η κατανόηση των βασικών συστατικών είναι απαραίτητη, θεμελιώδης γνώση React Native — το βασικό λεξιλόγιο του React Native UI, απαραίτητο για την δημιουργία οποιασδήποτε διεπαφής και για την προσαρμογή της γνώσης web React στο εγγενές μοντέλο συστατικών, μια βασική ικανότητα για την ανάπτυξη React Native.