React Native: ما هي، كيف يعمل Bridge وبيئة JavaScript

ما هو React Native

React Native هو إطار عمل تم إنشاؤه بواسطة فريق Facebook (الآن Meta) وتم إطلاقه كمصدر مفتوح في عام 2015. على عكس الأساليب الهجينة (Cordova, Ionic)، لا يستخدم React Native WebView. بدلاً من ذلك، تُرسم مكونات JavaScript إلى عناصر واجهة مستخدم أصلية: View ← UIView / android.view.View، Text ← UILabel / TextView، ScrollView ← UIScrollView / ScrollView.

كان الإصدار الأول من React Native يدعم iOS فقط. ظهر دعم Android في عام 2016. قدم الإصدار 0.60 (2019) Autolinking — الربط التلقائي للتبعيات الأصلية. تضمن React Native 0.68 (2022) البنية الجديدة Fabric + TurboModules. الإصدار الثابت الحالي 0.74 (2024) منقول بالكامل إلى New Architecture مع دعم Yoga 3.0 لتخطيط Flexbox.

وفقاً لـ Statista 2024، يُستخدم React Native في 38% من المشاريع عبر المنصات. يستخدم الإطار كل من Discord وInstagram وShopify وPinterest وSkype وUber Eats. تستخدم Meta React Native في Facebook وInstagram — تطبيق الجوال الرئيسي الذي يضم ملياري مستخدم.

تاريخ وتطور React Native

تم الإعلان عن React Native في مؤتمر React.js Conf في يناير 2015. كانت الفكرة نقل النموذج التصريحي لـ React من الويب إلى منصات الجوال. ظهر أول commit في المستودع في عام 2013 كمشروع داخلي لـ Facebook لإنشاء تطبيق Facebook Groups على iOS.

قدم الإصدار 0.70 (2022) محرك Hermes كمحرك JavaScript افتراضي. Hermes هو محرك مُجمّع مسبقاً (AOT) مُحسَّن للأجهزة الجوالة. يقلل وقت بدء التطبيق بنسبة 50% ويقلص حجم APK بنسبة 30% مقارنة بـ JavaScriptCore. يدعم Hermes ES6 وجزئياً ES2020.

الفرق بين React Native وReact Web

React Web يعرض المكونات في عناصر DOM (div, span, p) عبر ReactDOM. React Native يعرض في مكونات أصلية للمنصة. بدلاً من <div> يُستخدم <View>، وبدلاً من <span> — <Text>. تُحدد الأنماط عبر StyleSheet.create()، والتي تُترجم إلى خصائص CSS الخاصة بالمنصة. Flexbox مضمن افتراضياً عبر محرك Yoga.

تختلف التنقل في React Native عن الويب. بدلاً من react-router-dom يُستخدم React Navigation — مكتبة أصلية تدعم متصفحات Stack وTab وDrawer. يستخدم React Navigation 6.x الرسوم المتحركة الأصلية (useNativeDriver) والتكامل مع Deep Links. للتنقل الأصلي بين الشاشات باستخدام UINavigationController لنظام iOS وFragment لنظام Android، تُستخدم مكتبة react-native-navigation من Wix.

بنية React Native

كانت بنية React Native تقليدياً تدور حول Bridge — قناة JSON غير متزامنة بين بيئة JavaScript والكود الأصلي. منذ الإصدار 0.68، قدمت Meta New Architecture، التي تستبدل Bridge بـ JSI (JavaScript Interface) وFabric. دعنا نلقي نظرة على كلا النموذجين.

Bridge وFabric

Bridge هو بروتوكول JSON متسلسل يعمل على عدة خيوط: JS Thread (تفسير كود React)، Main Thread (واجهة المستخدم)، وNative Modules Thread (API). تمر كل تفاعلات بين JS والكود الأصلي بعمليات تسلسل وإلغاء تسلسل للكائنات، مما يخلق تأخيرات عند الاستدعاءات المتكررة. عند تمرير قائمة من 1000 عنصر، يُنشئ Bridge ما يصل إلى 10,000 رسالة JSON في الثانية.

Fabric هو نظام عرض جديد في React Native. بدلاً من Bridge، يستخدم Fabric شجرة ظل (Shadow Tree) بلغة C++ تتزامن مع خيط واجهة المستخدم عبر JSI. هذا يلغي تسلسل JSON: كود C++ الأصلي يستدعي مباشرة الوظائف في بيئة JavaScript والعكس صحيح. يقلل Fabric زمن الوصول للعرض من 16 مللي ثانية (Bridge) إلى 2–4 مللي ثانية.

TurboModules هو الجزء الثاني من New Architecture. في النموذج القديم، كانت جميع الوحدات الأصلية تُحمَّل عند بدء التطبيق. TurboModules تحمّل الوحدات ببطء (lazy loading) — فقط عندما يطلبها كود JS لأول مرة. هذا يقلل وقت بدء التشغيل البارد بنسبة 40% في التطبيقات التي تحتوي على 20+ وحدة أصلية.

مثال تطبيق React Native

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

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

الوحدات الأصلية

الوحدات الأصلية هي آلية لاستدعاء واجهات API الخاصة بالمنصة من JavaScript. إذا كانت الوظيفة غير مغطاة بالمكونات القياسية لـ React Native (الكاميرا، Bluetooth، القياسات الحيوية)، يكتب المطور وحدة بلغة Swift/Kotlin ويسجلها عبر RCTBridgeModule أو TurboModule. تُستدعى الوظيفة الأصلية من JS عبر NativeModules.CameraModule.takePhoto().

يوفر React Native وحدات أصلية جاهزة للوصول إلى مقياس التسارع (react-native-sensors)، الموقع الجغرافي (@react-native-community/geolocation)، القياسات الحيوية (react-native-biometrics) والإشعارات المحلية (@notifee/react-native). للسيناريوهات المخصصة، يقدم Expo واجهة Expo Modules API — واجهة أبسط لإنشاء وحدات أصلية بدون Xcode أو Android Studio.

مزايا React Native

مجتمع ضخم — React Native لديه أكبر مجتمع بين الأطر عبر المنصات. على GitHub، المشروع لديه 117,000+ نجمة و1800+ مساهم. npm يحمل react-native 3 ملايين+ مرة أسبوعياً. أسئلة React Native تشكل 5% من جميع أسئلة Stack Overflow في قسم تطوير الجوال.

النظام البيئي لـ JavaScript — مطورو React يستخدمون نفس الأدوات المستخدمة على الويب: npm، Babel، ESLint، Prettier، Jest، TypeScript. يمكن إعادة استخدام منطق الأعمال بين نسخة الويب (React) وتطبيق الجوال (React Native). المكتبات Redux وZustand وReact Query وReact Hook Form تعمل على كلا المنصتين بدون تغييرات.

Expo هو SDK ومجموعة أدوات تبسط التطوير على React Native. يوفر Expo وحدات جاهزة (كاميرا، إشعارات، خرائط، OAuth)، وبناءات سحابية (EAS Build)، وتحديثات OTA (EAS Update). يتيح Expo Go تشغيل التطبيق على جهاز فعلي بدون Xcode أو Android Studio. وفقاً لبيانات Expo 2024، 70% من مشاريع React Native الجديدة تستخدم Expo.

تحديثات OTA — ميزة متاحة عبر Expo Update وCodePush (Microsoft). يمكن للمطورين إرسال تحديثات حزمة JavaScript مباشرة للمستخدمين دون المرور بمراجعة App Store أو Google Play. هذا يسرع إصلاح الأخطاء الحرجة من 2–5 أيام (انتظار المراجعة) إلى 1–2 ساعة.

دعم TypeScript مضمن افتراضياً منذ React Native 0.71. قالب المشروع يتضمن tsconfig.json، وأنواع لجميع المكونات، ودعم الوضع الصارم. Flow (الكتابة الثابتة من Facebook) مدعوم أيضاً، لكن Meta توصي رسمياً بـ TypeScript. قالب TypeScript يشكل 85% من المشاريع الجديدة وفقاً لاستطلاع State of React Native 2024.

النظام البيئي والمكتبات الشائعة

npm هو سجل الحزم الرئيسي لـ React Native. يتم تصفية البحث عن المكتبات بكلمة مفتاحية react-native. للتثبيت يُستخدم npm install أو yarn add. React Native CLI يربط تلقائياً التبعيات الأصلية (منذ الإصدار 0.60). لمشاريع Expo، تتم إدارة التثبيت عبر expo install، الذي يختار إصدار المكتبة المتوافق.

المكتبات الرئيسية

@react-navigation/native — المعيار الفعلي للتنقل في React Native. المكتبة تتضمن Stack Navigator (انتقالات متحركة)، Tab Navigator (قائمة سفلية لنظامي iOS/Android)، Drawer Navigator (قائمة جانبية) وMaterial Top Tab. React Navigation 7.x (2024) قدمت تكويناً ثابتاً للمسارات ودعماً كاملاً لـ React 18 مع useSyncExternalStore.

react-native-reanimated — مكتبة للرسوم المتحركة عالية الأداء. Reanimated 3.x ينفذ الرسوم المتحركة في خيط واجهة المستخدم (worklet)، متجاوزاً خيط JS. هذا يضمن 60 إطاراً في الثانية حتى عند تحريك 100+ عنصر. useSharedValue وuseAnimatedStyle وwithSpring تحل محل API Animated من الحزمة القياسية. Reanimated يعالج إيماءات اللمس عبر react-native-gesture-handler.

@tanstack/react-query — مكتبة لإدارة حالة الخادم. React Query يخزن استجابات API في ذاكرة التخزين المؤقت، ويعيد طلب البيانات تلقائياً عند تغيير الشبكة (refetchOnReconnect)، ويدعم التقسيم إلى صفحات مع useInfiniteQuery. الإصدار 5.x يتضمن تحديثات متفائلة لتجربة المستخدم — يتم تحديث الواجهة قبل استلام استجابة الخادم ثم يتم ضبطها.