مكونات واجهة المستخدم والتفاعل الأساسية في 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);
المدونة
إتقان التحقق الشرطي في Laravel 12
يوليو 07, 2025
إتقان التحقق الشرطي في Laravel 12 في Laravel 12، نظام التحقق (validation) قوي جدًا، وميزة التحقق الشرطي بتخليك تتحكم في القوانين بتاعتك ب...
شرح مفصل لكل هوك في React
يوليو 01, 2025
🎣 شرح React Hooks وبأمثلة عملية 🧠 useState بيعمل إيه: بيضيف حالة داخلية (state) جوا أي مكون شغال بوظيفة. مثال عملي: import React, { useSta...
توليد تقارير بكفاءة مع كاش وزمن ثابت واستخدام الـ Job Queues
يوليو 07, 2025
إزاي نعمل كاش لتقارير بفترة زمنية ثابتة إزاي نولّد تقارير ضخمة في الخلفية باستخدام الـ Job Queues 1. 🧠 كاش للتقارير بفترة زمنية ثابتة لو ع...
إزاي تستخدم Web Components ببساطة وذكاء
يوليو 06, 2025
إزاي تستخدم Web Components ببساطة وذكاء كتير من المطورين بيفكروا إن Web Components معمولة عشان تبقى بديل كامل لفريموركات زي React أو Vue. بس الحقيق...
ألوان في CSS - شرح مبسّط
يونيو 26, 2025
ألوان في CSS - شرح مبسّط النهارده هنتكلم عن الألوان في CSS: ازاي بنحددها، وخصوصًا الطرق الحديثة زي lab() وoklch(). 1. يعني إيه لون؟ مفيش حاجة اسم...
أحدث مميزات ECMAScript 2025
يونيو 30, 2025
أحدث مميزات ECMAScript 2025 في 25 يونيو 2025، تم اعتماد ES2025 رسميًا. الإضافات الجاية هتسهل عليك كتابة الكود: 1. 📦 Import Attributes و JSON Module...
