React Native في تطوير التطبيقات المحمولة: ما هو، المفاهيم الأساسية وكيف يعمل

الأساسيات (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — امتداد نحوي لجافا سكريبت لوصف واجهة المستخدم. يشبه HTML ولكنه يعمل عبر React.createElement(). تعبيرات JSX: {variable}, {condition && <View />}, {array.map()}. Functional Component — دالة تُرجع JSX. تستقبل props كوسيطة. المعيار الحديث لـ React (قبل React 16.8 كانت تُستخدم Class Components). Hooks — دوال للوصول إلى الحالة ودورة الحياة من Functional Component. قواعد Hooks: فقط في المستوى الأعلى، فقط في Functional Components.

مرجع Hooks

useState — حالة محلية. useEffect — تأثيرات جانبية. useContext — الوصول إلى Context. useRef — مرجع قابل للتغيير. useCallback — تخزين الدالة. useMemo — تخزين القيمة. Custom Hooks — منطق قابل لإعادة الاستخدام: function useDebounce(value, delay).

// Functional Component مع hooks في React Native
import React, { useState, useEffect, useCallback } from 'react';
import {
  View, Text, FlatList,
  ActivityIndicator, SafeAreaView
} from 'react-native';

const DATA = Array.from({ length: 100 }, (_, i) => ({
  id: String(i),
  title: `Item ${i + 1}`,
}));

const Item = React.memo(({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
));

export default function App() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  }, []);

  return (
    <SafeAreaView>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </SafeAreaView>
  );
}

Hooks (useState, useEffect, useRef, useCallback, useMemo)

useState — يُرجع [value, setValue]. setValue — يستبدل (لا يدمج مثل setState في Class). للكائنات: setUser(prev => ({ ...prev, name: 'New' })). useEffect — يُنفذ بعد التصيير. مصفوفة التبعيات: [] — مرة واحدة (التركيب)، [dep] — عند تغيير dep، undefined — كل تصيير. دالة التنظيف — return () => {}. useContext — const value = useContext(MyContext). يتطلب Context.Provider أعلى في الشجرة.

useRef — كائن قابل للتغيير يحتفظ بالقيمة بين التصييرات. .current — تحوير. يُستخدم لـ: الوصول إلى العناصر الأصلية (ref={inputRef})، تخزين القيم السابقة، المؤقتات. useCallback — تُرجع دالة مخزنة. const handlePress = useCallback(() => {}, [dep]). useMemo — يُرجع قيمة مخزنة. const sorted = useMemo(() => data.sort(), [data]). استخدم useMemo للحسابات المكلفة.

useState — للحالة البسيطة. useEffect — لاستدعاءات API والاشتراكات. useCallback/useMemo — للتحسين. توصي IT Sectr بعدم تخزين كل شيء — فقط عند وجود مشاكل أداء حقيقية.

Custom Hooks

Custom Hook — دالة تستخدم hooks المضمنة. الاسم يبدأ بـ use*. أمثلة: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks هي الطريقة الأساسية لإعادة استخدام المنطق في React Native. توصي IT Sectr باستخراج منطق الأعمال إلى Custom Hooks وإبقاء المكونات نظيفة (فقط JSX + أنماط).

المكونات (View, Text, FlatList, ScrollView, SafeAreaView)

View — حاوية أساسية (مماثلة لـ div). Text — نص (المكون الوحيد للنص). TextInput — إدخال نص. ScrollView — حاوية قابلة للتمرير. FlatList — قائمة افتراضية للبيانات الكبيرة. SectionList — FlatList بأقسام. SafeAreaView — حشوة تلقائية من Safe Area (النتوء، شريط الحالة). Pressable — بديل حديث لـ TouchableOpacity. useColorScheme — اكتشاف السمة الداكنة/الفاتحة.

تحسين FlatList

FlatList — افتراضية: يتم تصيير العناصر المرئية فقط + windowSize. تحسين: 1) keyExtractor — مفتاح فريد، 2) getItemLayout — ارتفاع ثابت (تخطي قياس onLayout)، 3) React.memo لـ renderItem، 4) maxToRenderPerBatch (افتراضي 10)، 5) windowSize (افتراضي 21)، 6) removeClippedSubviews، 7) initialNumToRender.

التنقل في React Native

React Navigation — مكدس التنقل القياسي. NativeStackNavigator — رسوم متحركة أصلية (push/pop). TabNavigator — علامات تبويب سفلية. DrawerNavigator — قائمة جانبية. NavigationContainer — المكون الجذر للتنقل. Deep linking — تكوين الروابط للروابط الخارجية. تدفق المصادقة — تنقل شرطي: isAuth ? AppStack : AuthStack. توصي IT Sectr باستخدام NativeStackNavigator للشاشات الرئيسية و TabNavigator للتنقل من المستوى الأول.

الأنماط (StyleSheet)

StyleSheet.create() — إنشاء الأنماط. جميع الخصائص بـ camelCase: backgroundColor, fontSize, marginTop. Flexbox — نموذج التخطيط الافتراضي (flexDirection: 'column'). لا يوجد تسلسل CSS، لا وراثة، لا محددات. Inline styles — تعمل ولكن لا يُنصح بها. StyleSheet.compose() — دمج الأنماط. Platform.select — أنماط حسب المنصة: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — إدارة هوامش المنطقة الآمنة.

Styled Components و CSS-in-JS

Styled Components — مكتبة لـ CSS-in-JS في React Native. Restyle — تنسيق السمات + أنماط متجاوبة. NativeWind — Tailwind CSS لـ React Native. Unistyles — أنماط سريعة بـ CSS ذري. الوضع الداكن — useColorScheme + أنماط ديناميكية. توصي IT Sectr باستخدام StyleSheet.create للبساطة و NativeWind للمشاريع ذات نظام التصميم.

الرسوم المتحركة (Animated API)

Animated API — رسوم متحركة تعريفية. Animated.Value — قيمة الحركة. Animated.timing — حركة بسيطة. Animated.spring — حركة نابضية. Animated.View — View قابل للتحريك. useNativeDriver — حركة على الخيط الأصلي (transform, opacity — مدعومة). Animated.loop — حركة متكررة. LayoutAnimation — حركة تلقائية عند تغيير التخطيط. reanimated 2/3 (مكتبة) — بديل أكثر أداءً. Metro Bundler — أداة تجميع JavaScript. يجمع JS + الأصول في حزمة. يدعم Fast Refresh (Hot Reload). Hermes — محرك JS محسّن للأجهزة المحمولة: بدء سريع، ذاكرة أقل. افتراضي منذ RN 0.70+.

Gesture Handler والرسوم المتحركة

React Native Gesture Handler — معالجة أصلية للإيماءات. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — واجهة برمجة تعريفية للإيماءات. Reanimated + Gesture Handler — مزيج لرسوم متحركة 60fps مع الإيماءات. react-native-skia — عرض GPU لرسوميات 2D معقدة. توصي IT Sectr باستخدام Reanimated 3 لجميع الرسوم المتحركة الأكثر أداءً من Animated API.

الشبكات (fetch, AsyncStorage, API)

fetch — عميل HTTP مدمج. يدعم GET, POST, headers, body. Axios — مكتبة شائعة مع معترضات. AsyncStorage — تخزين مفتاح-قيمة (مشابه لـ UserDefaults). MMKV — بديل سريع لـ AsyncStorage من WeChat. react-native-keychain — تخزين آمن للرموز. React Query (TanStack Query) — إدارة حالة الخادم: تخزين مؤقت، إعادة تحقق، ترقيم صفحات. توصي IT Sectr باستخدام React Query لطلبات API و MMKV للتخزين المحلي.

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeToken = async (token) => {
  try {
    await AsyncStorage.setItem('@auth_token', token);
  } catch (e) {
    console.error('Storage error:', e);
  }
};

const getToken = async () => {
  try {
    return await AsyncStorage.getItem('@auth_token');
  } catch (e) {
    return null;
  }
};

Native Modules و Turbo Modules

Native Module — جسر بين JS والكود الأصلي (Java/Kotlin لنظام Android, ObjC/Swift لنظام iOS). يسمح باستدعاء واجهات برمجة التطبيقات الأصلية من JS. Turbo Modules (New Architecture) — بديل Native Modules القديمة. استدعاء متزامن، كتابة الأنواع عبر Codegen، حمل أقل. Fabric Renderer — عارض جديد بتخطيط متزامن. JSI (JavaScript Interface) — وصول مباشر لـ JS إلى الكائنات الأصلية بدون جسر. توصي IT Sectr باستخدام Turbo Modules للمشاريع الجديدة و Native Modules للمشاريع الحالية.

// وحدة Android الأصلية (Kotlin)
class CalendarModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName() = "CalendarModule"

    @ReactMethod
    fun createCalendarEvent(name: String, location: String) {
        val intent = Intent(Intent.ACTION_EDIT).apply {
            type = "vnd.android.cursor.item/event"
            putExtra(Events.TITLE, name)
            putExtra(Events.EVENT_LOCATION, location)
        }
        reactContext.startActivity(intent)
    }
}

الاختبار (Jest, React Native Testing Library)

Jest — مشغل الاختبارات القياسي. describe/it/expect. React Native Testing Library — اختبار المكونات. render, fireEvent, waitFor. screen.getByText, getByTestId — بحث. userEvent — محاكاة الإجراءات. اختبارات Snapshot — toMatchSnapshot(). MSW (Mock Service Worker) — محاكاة API. Detox — اختبارات E2E لـ RN (grey-box، أصلي). توصي IT Sectr باستخدام React Native Testing Library للمكونات و Detox للسيناريوهات الشاملة.

CodePush (App Center) — تحديثات OTA لحزمة JS بدون نشر في App Store/Google Play. يُستخدم لـ: إصلاحات عاجلة، اختبارات A/B، تغييرات المحتوى. القيود: لا يمكن تغيير الكود الأصلي. البدائل: EAS Update (Expo)، react-native-update. توصي IT Sectr باستخدام CodePush للإصلاحات العاجلة و EAS Update لمشاريع Expo.

Expo — إطار عمل لـ React Native. سير عمل مُدار — جميع التكوينات عبر app.json. إصدارات التطوير — وحدات أصلية مخصصة بدون eject. Expo SDK — وحدات مدمجة: كاميرا، قياسات حيوية، إشعارات. EAS Build — بناء سحابي. Expo Router — توجيه قائم على الملفات (مشابه لـ Next.js). توصي IT Sectr باستخدام Expo للمشاريع الجديدة و bare RN للمشاريع ذات التخصيص الأصلي العميق.