ما هو React Native حقًا

افتح تطبيق Notes على هاتفك واسحب إصبعك نزولًا على قائمة طويلة. الارتداد عند أعلى القائمة، وطريقة ظهور مقابض تحديد النص، والتمرير الذي يواصل الانزلاق بعد أن ترفع إصبعك: كل ذلك من كود نظام التشغيل نفسه. ووعد React Native أن يحصل تطبيقك على السلوك نفسه، لأنه يستخدم الـ views نفسها.

نبني في هذه الدورة Trailhead، وهو سجلّ لرحلات المشي. في النهاية سيكون لديك قائمة بالرحلات السابقة، وشاشات لتفاصيل كل درب، ونموذج لتسجيل رحلة جديدة، وتتبّع بالـ GPS، وصور، وتذكيرات، وتخزين دون اتصال، وbuild يعمل على هاتف حقيقي. وكل درس يضيف قطعة واحدة.

عناصر أصلية تصفها React

على الويب، تحوّل React الـ components إلى عُقد DOM، ثم يرسمها المتصفّح. أما React Native فيستبدل الطبقة السفلى. أنت تكتب components باستخدام <View> و<Text> و<Image>؛ وتحسب React ما الذي تغيّر؛ ثم يُنشئ مُصيِّر React Native الـ native views (عناصر الواجهة الأصلية للمنصّة) أو يحدّثها: UIView على iOS، وandroid.view.View على Android.

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

export default function Home() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Trailhead</Text>
    </View>
  );
}

لا HTML، ولا ملف CSS، ولا DOM. كائن style يشبه CSS، وهذا مقصود، لكنه كائن JavaScript يقرؤه محرّك التخطيط في React Native (واسمه Yoga) ليحدّد أماكن الـ native views.

خيطان (threads) يهمّانك

يعمل كود JavaScript في Hermes، وهو محرّك JavaScript صُمّم لـ React Native، على thread خاص به. أما الـ UI thread الخاص بالمنصّة فيرسم الـ views ويستقبل اللمسات. وفصلهما هو ما يجعل التمرير الأصلي سلسًا بينما يعمل كودك، وهو أيضًا ما يجعل الأزرار تبدو ميتة عندما تشغّل حلقة تكرار متزامنة طويلة في JavaScript: اللمسة تصل، لكن لا أحد متفرّغ لمعالجتها.

ستعود إلى هذا في درس الأداء. أما الآن فتذكّر القاعدة العملية: أبقِ الـ JS thread متفرّغًا أثناء الإيماءات والحركات.

الـ New Architecture باختصار

لسنوات، كانت JavaScript والكود الأصلي يتواصلان عبر «جسر» (bridge) يحوّل الرسائل إلى JSON ويرسلها على دفعات. ثم حلّت محلّه الـ New Architecture (المعمارية الجديدة):

• JSI تتيح لـ JavaScript استدعاء C++ مباشرة والاحتفاظ بمراجع لكائنات أصلية.
• Fabric هو المُصيِّر (renderer) الجديد، مكتوب بـ C++ ومشترك بين المنصّتين.
• الـ TurboModules وحدات أصلية (الكاميرا، التخزين، المستشعرات) تُحمَّل عند الحاجة، أي عند أول استخدام.

أصبحت المعمارية الافتراضية في React Native 0.76، والخيار الوحيد بدءًا من 0.82. لن تضبط أيًّا منها بنفسك؛ فمشاريع Expo تستخدمها مباشرة. لكنها تهمّ عند اختيار المكتبات: أي مكتبة تثبّتها يجب أن تدعمها، والمكتبات التي تخضع للصيانة تدعمها.

ما الذي ينتقل من React وما الذي لا ينتقل

الـ components والـ props والـ state والـ hooks والـ context والـ keys: كلها كما هي. وميزات React 19 تعمل أيضًا. ما يتغيّر هو كل ما يحيط بـ React: العناصر الأساسية (View بدلًا من div)، والتنسيق (لا cascade، وflexbox يبدأ بالاتجاه العمودي)، والتنقّل (stacks وtabs بدلًا من عناوين URL في شريط)، وواجهات الجهاز (أذونات قد يرفضها المستخدم)، والإطلاق (مراجعة المتجر بدلًا من deploy).

في الدرس التالي ستنشئ مشروع Trailhead باستخدام Expo وتشغّله على هاتفك.