مكونات واجهة المستخدم والتفاعل الأساسية في 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);
المدونة
تجاوز $fillable بأمان باستخدام forceFill() في Laravel
يوليو 02, 2025
تجاوز $fillable بأمان باستخدام forceFill() في Laravel جربت تستخدم create() في Laravel ولاقيت إن حقول زي role أو status مش بتتحفظ؟ ده بسبب حماية Larav...
لارافيل 12: كل جديد من 12.0 لـ 12.19 – دليل شامل
يوليو 20, 2025
🔧 1. لارافيل 12.0 – ستارتر كيتس وتعديلات أساسية إصدار 12.0 جاب Starter Kits جاهزة للـ React، Vue، Livewire، وكمان دمج مع WorkOS AuthKit،...
تذكير بالمهام مع Laravel وMongoDB
يونيو 30, 2025
📌 بناء تطبيق تذكير مهام المقال ده بيشرح إزاي نعمل تطبيق Laravel يستخدم MongoDB علشان يذكرك بالمهمات بتاعتك، مع تسجيل دخول، CRUD، وتذكير بالإيميلات...
تاريخ React – استعراض شامل وتحليل تقني
يوليو 26, 2025
1. البدايات: النشأة داخل Facebook في عام 2011، واجه مهندسو Facebook تحديًا متزايدًا في صيانة واجهات المستخدم المعقدة والتفاعلية. تم تطوير مكتبة د...
مقارنة بين 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...
