مكونات واجهة المستخدم والتفاعل الأساسية في React Native

يوليو 1, 2025

مكونات واجهة المستخدم والتفاعل الأساسية في React Native

React Native بتوفرلك مجموعة قوية من المكونات الجاهزة اللي تقدر تستخدمها لبناء تطبيقات موبايل أصلية بدون أي مكتبات خارجية. المقالة دي فيها شرح تفصيلي لكل مكون، مع مثال عملي وسبب استخدامه.

📦 مكونات الواجهة الأساسية

1. View

عنصر أساسي بيستخدم كحاوية لعناصر تانية، زي div في HTML. بنستخدمه لتنظيم العناصر جوه التطبيق.

<View style={{ padding: 20 }}>
  <Text>أهلاً بالعالم!</Text>
</View>

2. Text

للعرض النصوص على الشاشة، وتقدر تتحكم في لونه وحجمه ومحاذاته.

<Text style={{ fontSize: 18, color: 'blue' }}>نص تجريبي</Text>

3. Image

لعرض الصور سواء من الإنترنت أو من ملفات محلية.

<Image source={{ uri: 'https://example.com/image.jpg' }} style={{ width: 100, height: 100 }} />

4. ScrollView

عنصر بيسمحلك تعمل Scroll لو المحتوى أطول من الشاشة.

<ScrollView>
  <Text>محتوى طويل...</Text>
</ScrollView>

5. FlatList

أفضل طريقة لعرض القوائم، خصوصًا لو الداتا كتير.

<FlatList
  data={[{ key: 'عنصر 1' }, { key: 'عنصر 2' }]}
  renderItem={({ item }) => <Text>{item.key}</Text>}
/>

6. TextInput

حقل لإدخال النصوص من المستخدم زي الاسم أو الباسورد.

<TextInput placeholder="اكتب اسمك" style={{ borderWidth: 1, padding: 10 }} />

7. Button

زر بسيط بيقوم بعمل معين عند الضغط عليه.

<Button title="اضغط هنا" onPress={() => alert('تم الضغط!')} />

8. Pressable

عنصر حديث للتفاعل مع الضغط، وبيتيح تحكم أكتر من الزر العادي.

<Pressable onPress={() => console.log('تم الضغط')}>
  <Text>اضغط هنا</Text>
</Pressable>

9. Modal

بيفتح نافذة منبثقة فوق التطبيق، زي التنبيهات أو الفورمات.

<Modal visible={true} transparent={true}>
  <View style={{ marginTop: 100 }}>
    <Text>دي نافذة منبثقة</Text>
  </View>
</Modal>

🎯 مكونات التفاعل

1. Alert

بيظهر رسالة تنبيه من النظام زي "هل أنت متأكد؟".

Alert.alert("تنبيه", "هل أنت متأكد؟")

2. BackHandler

بيتحكم في زر الرجوع في أجهزة أندرويد.

BackHandler.addEventListener('hardwareBackPress', () => {
  // من هنا تتحكم في الرجوع
  return true;
});

3. KeyboardAvoidingView

بيرفع العناصر لما الكيبورد يظهر عشان ميغطيش الفورم.

<KeyboardAvoidingView behavior="padding">...</KeyboardAvoidingView>

📱 مكونات الأنيميشن

1. Animated

API قوي لعمل أنيميشن احترافي للعناصر.

const fadeAnim = useRef(new Animated.Value(0)).current;

Animated.timing(fadeAnim, {
  toValue: 1,
  duration: 1000,
  useNativeDriver: true
}).start();

2. LayoutAnimation

بيعمل أنيميشن تلقائي للتغيرات في تصميم الصفحة.

LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);

المدونة

إزاي OAuth بيشتغل

يونيو 29, 2025

إزاي OAuth بيشتغل؟ OAuth هو بروتوكول بيخلّي التطبيقات تقدر تدخل على بياناتك بطريقة آمنة من غير ما تدّيهم الباسورد بتاعك. زي مثلًا لو حبيت تطبيق ينشر...

مقارنة بين Scopes + Traits × UseEloquentBuilder في Laravel

يوليو 13, 2025

في Laravel، بنحتاج دايمًا نكتب استعلامات شبه بعض في أكتر من مكان. Laravel بتوفر طريقتين أساسيين نقدر نستخدمهم علشان نرتّب الاستعلامات دي: Scopes + Tra...

تحديث Laravel 12.18.0

يونيو 17, 2025

تحديث Laravel 12.18.0 صدر نسخه Laravel 12.18.0 فيها شوية ميزات جامدة كده: توابع لتشفير وفك تشفير النصوص باستخدام Stringable ديركت في chain strings...

React Native 0.81: نقلة نوعية في كفاءة بيئة التطوير

يناير 27, 2026

مقدمة يُعد React Native من أكثر الأطر استخدامًا في تطوير تطبيقات الهواتف الذكية متعددة المنصات. ومع ذلك، ظل وقت بناء تطبيقات iOS أحد أكبر التحديا...

الفرق بين Redux, Context & React Components في إدارة الحالة

أغسطس 06, 2025

عند بناء تطبيقات باستخدام React، هناك حاجة إلى إدارة البيانات التي تتغير نتيجة تفاعل المستخدم أو جلب البيانات من مصادر خارجية. توجد ثلاث وسائل رئيسي...

حقق أداءً أعلى لتقارير البيانات الضخمة باستخدام نظام (Queues)

يوليو 07, 2025

إزاي نعمل كاش لتقارير بفترة زمنية ثابتة إزاي نولّد تقارير ضخمة في الخلفية باستخدام الـ Job Queues 1. 🧠 كاش للتقارير بفترة زمنية ثابتة لو ع...