React Native გთავაზობთ ძირითადი კომპონენტების ნაკრებს — როგორიცაა View, Text, Image, ScrollView, TextInput — რომლებიც ნატივური UI ელემენტებზე აჯეკვს. ეს React Native ინტერფეისების ფუნდამენტური აგურებია, რომლებიც ვებ HTML ელემენტების ნაცვლად გამოიყენება.
ძირითადი კომპონენტები (vs ვებ 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
რატომ არის ეს მნიშვნელოვანი
ძირითადი კომპონენტების გაგება ფუნდამენტალურია React Native განვითარებაში, რადგან ისინი არიან React Native ინტერფეისის თითოეული აგური — თქვენ ამათი კომბინირებით აშენებთ ინტერფეისებს, ამიტომ ეს არის აუცილებელი ფუნდამენტური ცოდნა.
React Native გთავაზობთ საკუთარი კომპონენტებს, რომლებიც ნატივური ხედებზე აჯეკვს (ვებ HTML ელემენტების მაგივრად), და ფუნდამენტური ელემენტების გაგება — View (კონტეინერი, როგორც div), Text (ყველა ტექსტისთვის, მნიშვნელოვანი წესით, რომ ყველა ტექსტი უნდა იყოს Text კომპონენტის შიგნით, არ როგორც ვებში), Image, TextInput, ScrollView, FlatList (ეფექტური გრძელი სიებისთვის), და touchables/Pressable (ტაპების დასამუშავებლად) — აუცილებელია React Native ინტერფეისის ასაგებად.
ძირითადი განსხვავებების გაგება განსაკუთრებით მნიშვნელოვანია ვებ/React განვითარებელებისთვის, რომლებიც React Native-ზე გადიან: div ნაცვლად View-ის გამოყენება და p/span ნაცვლად Text-ის გამოყენება (ყველა-ტექსტი-Text-ში წესით), სტილიზაცია style prop-ის მაშინ CSS კლასები/ფაილების ნაცვლად, touchables/Pressable გამოყენება ინტერაქციებისთვის onClick-ის ნაცვლად, და FlatList გამოყენება გრძელ სიებისთვის (რომელიც ეფექტურად/ზარი-რენდერს) ყველაფრის მეპირებაის ნაცვლად — ეს განსხვავებები ხშირი სირთულეები არიან, რომლებიც ძირითადი კომპონენტების გაგება გასწორებს.
კომპონენტები ერთმანეთში (როგორც React) რთავენ ინტერფეისების აშენებისთვის, View ფუნდამენტური კონტეინერი ხდება.
ვინაიდან ძირითადი კომპონენტები არიან React Native ინტერფეისის თითოეული აგური (ზუსტად იყენებთ მათ ინტერფეისების აშენებაში) და მათი გაგება და როგორ განსხვავდებიან ვებ HTML-ისგან ფუნდამენტალურია React Native აპ-ების აშენებისთვის (განსაკუთრებით ვებ განვითარებელებისთვის), ძირითადი კომპონენტების გაგება აუცილებელი, ფუნდამენტური React Native ცოდნაა — React Native ინტერფეისის ძირითადი ლექსიკა, აუცილებელი ნებისმიერი ინტერფეისის აშენებისთვის და ვებ React ცოდნის ნატივური კომპონენტის მოდელზე ადაპტირებისთვის, React Native განვითარების ძირითადი კომპეტენცია.
