توفر React Native مجموعة من المكونات الأساسية — مثل View و Text و Image و ScrollView و TextInput — التي تُعيّن إلى عناصر واجهة المستخدم الأصلية. فهي اللبنات الأساسية الأساسية لواجهات مستخدم React Native، وتُستخدم بدلاً من عناصر 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: استخدام View بدلاً من div و Text بدلاً من p/span (مع قاعدة وضع كل النص في Text)، التصميم عبر خاصية style بدلاً من فئات/ملفات CSS، استخدام touchables/Pressable للتفاعلات بدلاً من onClick، واستخدام FlatList للقوائم الطويلة (التي تُعيّن بكفاءة/بطريقة كسولة) بدلاً من mapping على كل شيء — هذه الفروقات هي عقبات شائعة حيث يوضح فهم المكونات الأساسية ذلك.
تتكون المكونات (مثل React) لبناء الواجهات، مع View كحاوية أساسية.
نظراً لأن المكونات الأساسية هي اللبنات الأساسية لكل واجهة مستخدم React Native (تستخدمها بشكل مستمر لبناء الواجهات) وفهمها وكيف تختلف عن HTML للويب أمر أساسي لبناء تطبيقات React Native (خاصة لمطوري الويب)، فإن فهم المكونات الأساسية معرفة أساسية وأساسية في React Native — المفردات الأساسية لواجهة مستخدم React Native، ضرورية لبناء أي واجهة وللتكيف مع معرفة web React لنموذج المكون الأصلي، وهي كفاءة أساسية لتطوير React Native.