React Native ले मुख्य components को एक सेट प्रदान गर्छ — जस्तै View, Text, Image, ScrollView, TextInput — जो native UI elements सँग म्यप गरिन्छन्। यी React Native UIs को मौलिक निर्माण खण्डहरू हुन्, जुन web HTML elements को सट्टा प्रयोग गरिन्छन्।
React Native ले मुख्य components को एक सेट प्रदान गर्छ — जस्तै View, Text, Image, ScrollView, TextInput — जो native UI elements सँग म्यप गरिन्छन्। यी React Native UIs को मौलिक निर्माण खण्डहरू हुन्, जुन web HTML elements को सट्टा प्रयोग गरिन्छन्।
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
मुख्य components बुझ्न React Native development को लागि मौलिक छ किनभने यी प्रत्येक React Native UI को निर्माण खण्ड हुन् — तपाई तिनलाई compose गरेर interfaces बनाउनुहुन्छ, त्यसैले यो अनिवार्य आधारभूत ज्ञान हो।
React Native ले आफ्नै components प्रदान गर्छ जो native views सँग म्यप गरिन्छन् (web HTML elements को सट्टा), र आवश्यक ones बुझ्न — View (container, div जस्तै), Text (सबै पाठको लागि, महत्वपूर्ण नियमसहित कि सबै पाठ Text component भित्र हुनुपर्छ, web को विपरीत), Image, TextInput, ScrollView, FlatList (दक्ष लामो सूचीहरूको लागि), र touchables/Pressable (taps ह्यान्डल गर्नको लागि) — कुनै पनि React Native UI बनाउन आवश्यक छ।
web बाट मुख्य भिन्नताहरू बुझ्न web/React developers को लागि विशेष महत्वपूर्ण छ जो React Native मा परिवर्तन गरिरहेका छन्: div को सट्टा View र p/span को सट्टा Text प्रयोग गर्नु (all-text-in-Text नियमसहित), CSS classes/files को सट्टा style prop द्वारा styling, onClick को सट्टा touchables/Pressable interactions को लागि, र सबै कुरा म्यप गर्नु को सट्टा लामो सूचीहरूको लागि FlatList प्रयोग गर्नु (जो efficiently/lazily render गर्छ) — यी भिन्नताहरू सामान्य अवरोधहरू हुन् जुन core components बुझ्दा स्पष्ट हुन्छन्।
Components compose गर्छन् (React जस्तै) UIs बनाउन, View लाई मौलिक container को रूपमा।
मुख्य components प्रत्येक React Native UI को निर्माण खण्ड भएको कारण (तपाई तिनलाई interfaces निर्माण गर्न निरन्तर प्रयोग गर्नुहुन्छ) र तिनलाई र तिनीहरू web HTML बाट कसरी भिन्न छन् भनेर बुझ्नु React Native apps बनाउन मौलिक छ (विशेष गरी web developers को लागि), core components बुझ्न आवश्यक, आधारभूत React Native ज्ञान हो — React Native UI को आधारभूत शब्दावली, कुनै पनि interface बनाउन आवश्यक र web React ज्ञान लाई native component model मा अनुकूल गर्न, React Native development को लागि मुख्य योग्यता।