[ العودة ]
TECH_MODULE_ID: EXPO

[ > ] رياكت نيتف إكسبو / Expo

تعريف_النظام
CORE_DEFINITION

وصف عام

إطار عمل (Framework) مبني على React Native يسهل عملية بناء تطبيقات الهواتف الذكية لنظامي Android و iOS. يوفر Expo ميزات قوية وجاهزة وتجربة تطوير (DX) متفوقة بفضل أدوات مثل Expo Router و EAS (Expo Application Services)، مما يقلل الحاجة للتعامل مع كود Java أو Objective-C الأصلي.

البيانات_الأساسية
CORE_DATA
React Native Expo
تطوير تطبيقات المحمول
STATUS: ACTIVE
نبذة_تاريخية
HISTORY

تم إطلاق Expo في عام 2015 كمجموعة من الأدوات لتسهيل تجربة تطوير React Native الصعبة آنذاك. تطور المشروع من كونه مجرد طبقة فوقية إلى نظام متكامل يدعم المزامنة اللحظية وتحميل التحديثات عبر الهواء (OTA). اليوم، يعتبر Expo الخيار الرسمي والموصى به من قبل فريق React للحصول على أفضل تجربة تطوير تطبيقات المحمول.

VERIFIED_DATA
أفضل_الممارسات
BEST_PRACTICES
  • استخدم Expo Router لإدارة المسارات بشكل تلقائي ومنظم (File-based Routing).
  • اعتمد على NativeWind لتنسيق الواجهات باستخدام لغة Tailwind CSS بشكل محلي وسريع.
  • قم بإنشاء Development Builds مخصصة بدلاً من الاعتماد الكلي على تطبيق Expo Go للمشاريع الكبيرة.
  • استخدم React-Native-Reanimated للرسوم المتحركة للحصول على أداء 60 إطار في الثانية.
  • طبق SafeAreaView لضمان ظهور المحتوى بشكل صحيح بعيداً عن النتوءات (Notches) في الشاشات الحديثة.
GUIDE_V1

طريقة الكتابة والبنية

SYNTAX_ARCH

01.بناء واجهة أساسية (Core UI)

EXPO_SRC_01
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>مرحباً إكسبو</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#000', alignItems: 'center', justifyContent: 'center' },
  text: { color: 'white', fontSize: 24, fontWeight: 'bold' }
});

في React Native، يتم استبدال عناصر الـ HTML (مثل div, h1) بمكونات أصلية (Native Components) مثل View و Text و StyleSheet لضمان تحويلها لعناصر حقيقية في النظام الأصلي لهواتف الأندرويد والآيفون.

02.إدارة المسارات (Expo Router - File Based)

EXPO_SRC_02
// app/index.tsx
import { Link } from 'expo-router';

export default function Home() {
  return (
    <Link href="/profile">انتقل إلى الحساب</Link>
  );
}

بفضل Expo Router، يتم إنشاء مسارات التطبيق تلقائياً بناءً على هيكلية الملفات في مجلد app، بنفس طريقة عمل Next.js في الويب.

المنظومة التقنية

ECOSYSTEM_MODULES

إطارات العمل (Frameworks)

Expo SDK
المكتبة الأساسية التي توفر وصولاً لكاميرا الهاتف، الموقع، الذاكرة، وكل حساسات الجهاز.
Expo Router
النظام الرسمي لإدارة المسارات (Routing) في إكسبو، مستوحى من نظام Next.js.
EAS Build
خدمة سحابية لبناء تطبيقات Android و iOS (APK/AAB/IPA) بدون الحاجة لجهاز Mac.

المكتبات المشهورة (Libraries)

NativeWind
الاستخدام: استخدام Tailwind CSS في React Native لكتابة وتنسيق تطبيقات فائقة السرعة.
React Navigation
الاستخدام: المكتبة الكلاسيكية لإدارة التنقل بين شاشات التطبيق في React Native.
Reanimated
الاستخدام: المحرك الأساسي لرسوم متحركة (Animations) سلسة جداً تعمل في مسار منفصل.
Zustand
الاستخدام: أبسط وأسرع مكتبة لإدارة حالة التطبيق (State Management) في الريكالت نيتف.

هيكلية الملفات الشائعة

FILE_SYSTEM_TREE

شجرة_المفات
DIRECTORY_SCAN
Project Root/
├── app/ (المسارات والصفحات - Expo Router)
│   ├── (tabs)/ (تبويبات التطبيق)
│   ├── [id].tsx (صفحة ديناميكية)
│   └── _layout.tsx (تخطيط عام)
├── components/ (مكونات الواجهة المشتركة)
├── constants/ (الثوابت والألوان)
├── assets/ (الصور والأيقونات والخطوط)
├── hooks/ (المنطق البرمجي المخصص)
├── app.json (إعدادات المشروع والمنصة)
├── package.json (إدارة المكتبات والتبعيات)
└── tsconfig.json (إعدادات TypeScript)