طَبِّقْهاتعلّم المبدأ، وطبّقه بيدكمقرر 251 · برمجة الأجهزة الذكية
الدرس 2 · الوحدة 1: مفاهيم البرمجة للأجهزة الذكية

المكوّنات الأساسية: View و Text و Image والأنماط StyleSheet

لبنات الواجهة الأصيلة وتنظيم الأنماط. ⏱ نحو 35 دقيقة.

بعد هذا الدرس ستستطيع أن:
  • تستخدم View و Text و Image بدقّة وتعرف مقابلها في الويب.
  • تضبط الخطوط وتداخل النصوص.
  • تعرض صورة بعرضٍ وارتفاعٍ محدّدين.
  • تنظّم الأنماط بـ StyleSheet وتدمجها بمصفوفة.
جرّب بنفسك أسئلة التقييم

١لبنات الواجهة الأصيلة

في الويب تبني من div وspan وimg. في React Native لكل منها مقابلٌ أصيل يتحوّل إلى عنصر واجهةٍ حقيقيّ على الجهاز:

الويبReact Nativeالدور
<div><View>حاوية تُرتّب ما بداخلها
<p> <span><Text>كل نصّ ظاهر
<img><Image>صورة من الشبكة أو الجهاز
<button><Pressable>منطقة تستقبل اللمس

القاعدة التي لا تتغيّر: كل نصّ داخل Text، وكل تخطيطٍ داخل View.

٢Text: النصّ والخطوط

Text يقبل أنماط الخط، ويمكن تداخله لتطبيق أنماطٍ جزئية:

import { View, Text } from 'react-native'; export default function App() {  return (    <View style={{ padding: 20 }}>      <Text style={{ fontSize: 24, fontWeight: 'bold', color: '#E8820C' }}>        متجر الواحة      </Text>      <Text style={{ fontSize: 16, marginTop: 8 }}>        السعر: <Text style={{ fontWeight: 'bold' }}>٤٩٩ ريال</Text> فقط      </Text>    </View>  );}

٣Image: الصور

Image يعرض صورةً من رابطٍ عبر الخاصية source={{ uri }}، ويجب تحديد العرض والارتفاع دائمًا:

import { View, Text, Image } from 'react-native'; export default function App() {  return (    <View style={{ padding: 16, alignItems: 'center' }}>      <Image        source={{ uri: 'https://picsum.photos/120' }}        style={{ width: 120, height: 120, borderRadius: 60 }}      />      <Text style={{ marginTop: 10, fontWeight: 'bold' }}>صورة المنتج</Text>    </View>  );}

على عكس الويب، صورة بلا width/height لا تظهر. والرابط للتجربة فقط؛ على الجهاز غالبًا تُحمَّل الصور محليًّا.

٤StyleSheet: التنظيم وإعادة الاستخدام

نجمع الأنماط في كائنٍ واحد. يمكن دمج عدّة أنماط بمصفوفة style={[a, b]}، والأخيرة تغلب:

import { View, Text, StyleSheet } from 'react-native'; export default function App() {  return (    <View style={styles.screen}>      <Text style={[styles.badge, styles.sale]}>تخفيض</Text>      <Text style={[styles.badge, styles.new]}>جديد</Text>    </View>  );} const styles = StyleSheet.create({  screen: { flexDirection: 'row', gap: 10, padding: 16 },  badge: { color: 'white', paddingVertical: 6, paddingHorizontal: 12, borderRadius: 20, overflow: 'hidden' },  sale: { backgroundColor: '#C62828' },  new: { backgroundColor: '#2E7D32' },});

توقّع وتحقّق

مقابل &lt;img&gt; في React Native:

ما الذي يجب تحديده دائمًا لـ Image؟

لدمج نمطين على عنصر نستخدم:

الأخير يغلب.

اسم خاصية لون الخلفية في RN:

camelCase.

الخلاصة

تحدٍّ برمجي: بطاقة ملف شخصي

سهل

اصنع بطاقةً تجمع صورة ونصّين بأنماط StyleSheet.

المطلوب:
  • استخدم Image بعرض وارتفاع 80 وborderRadius 40.
  • أضف <Text testID="name"> نصّه «سعود الحربي».
  • أضف <Text testID="role"> نصّه «مطوّر تطبيقات».
  • نظّم الأنماط في StyleSheet.create.
👀 اعرض الناتج المطلوب (وجرّبه)
✓ التحقق الآلي من حلّك:
  • الكود يعمل بلا أخطاء في Console
  • الاسم في testID=name
  • الدور في testID=role
  • توجد صورة

💡 تلميح 1
الصورة: <Image source={{ uri: '…' }} style={styles.avatar} />.
💡 تلميح 2
عرّف avatar: width و height و borderRadius في StyleSheet.

حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.

import { View, Text, Image, StyleSheet } from 'react-native'; export default function App() {  return (    <View style={styles.card}>      <Image source={{ uri: 'https://picsum.photos/80' }} style={styles.avatar} />      <Text testID="name" style={styles.name}>سعود الحربي</Text>      <Text testID="role" style={styles.role}>مطوّر تطبيقات</Text>    </View>  );} const styles = StyleSheet.create({  card: { alignItems: 'center', padding: 16 },  avatar: { width: 80, height: 80, borderRadius: 40 },  name: { fontSize: 18, fontWeight: 'bold', marginTop: 10 },  role: { color: '#666', marginTop: 4 },});
انتقل إلى تقييم الدرساختيار من متعدد، وصح وخطأ، وأكمل الفراغ، وتتبّع الناتج.ابدأ التقييم ←

📝 معلم؟ أرسل ملاحظة للمؤلف عن هذا الدرس