الترقية إلى إصدارات جديدة من React Native

من موسوعة حسوب

ستمنحك الترقية إلى إصدارات جديدة من React Native إمكانية الوصول إلى المزيد من واجهات برمجة التطبيقات (API)، والواجهات وأدوات المطورين وغير ذلك من ميّزات. تتطلب الترقية بذل القليل من المجهود، لكنّ فريق React Native يعمل على تسهيل الأمر.

مشاريع Expo

تتطلب ترقية مشروع Expo الخاص بك إلى إصدار جديد من React Native تحديث إصدارات الحزم react-native و react و expo في ملف package.json في مشروعك. انظر هذه القائمة للتعرّف على الإصدارات المدعومة. ستحتاج أيضًا إلى تعيين نسخة sdkVersion الصحيحة في ملف app.json الخاص بك.

انظر تحديث Expo للحصول على معلومات محدثة حول ترقية مشروعك.

مشاريع React Native

لأنّ مشاريع React Native النموذجية تتكون أساسًا من مشروع Android ومشروع iOS ومشروع JavaScript، فإنّ الترقية قد تكون صعبة إلى حد ما. توجد طريقتان للترقية من إصدار أقدم من React Native هما React Native CLI أو الترقية اليدوية.

React Native CLI

تأتي أداة React Native CLI مع أمر الترقية ‎‎upgrade‎‎ الذي يسمح بترقية الملفات المصدريّة بخطوة واحدة مع الحد الأدنى من التعارضات، وذلك بفضل مشروع rn-diff-purge.

1. نفذ الأمر upgrade

يعمل هذا الأمر أعلى نظام إدارة النسخ Git باستخدام git apply مع دمج ثلاثي الاتجاهات (‎3-way merge‎)، لذا يجب استخدام Git ليعمل.

نفذ الأمر التالي للترقية إلى الإصدار الأخير:

npx react-native upgrade

يمكنك تحديد إصدار React Native عن طريق تمرير مُعامل للأمر، على سبيل المثال، نفّذ الأمر التالي للترقية إلى الإصدار ‎‎0.59.0-rc.0‎‎:

npx react-native upgrade 0.61.0-rc.0

يُرقّى المشروع باستخدام ‎‎git apply‎‎ مع دمج ثلاثي الاتجاهات (‎3-way merge‎). لهذا السبب قد تحتاج إلى حل بعض التعارضات.

2. حل التعارضات

تتضمن الملفات المتعارضة علامات توضّح بوضوح من أين تأتي التغييرات. فمثلا:

13B07F951A680F5B00A75B9A /* Release */ = {
  isa = XCBuildConfiguration;
  buildSettings = {
    ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< نحن
    CODE_SIGN_IDENTITY = "iPhone Developer";
    FRAMEWORK_SEARCH_PATHS = (
      "$(inherited)",
      "$(PROJECT_DIR)/HockeySDK.embeddedframework",
      "$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
    );
=======
    CURRENT_PROJECT_VERSION = 1;
>>>>>>> هم
    HEADER_SEARCH_PATHS = (
      "$(inherited)",
      /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
      "$(SRCROOT)/../node_modules/react-native/React/**",
      "$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
    );

هنا كلمة "نحن" تُمثّل شيفرتك أو شيفرة فريقك و"هم" تُمثّل "فريق تطوير React Native".

الأداة Upgrade Helper

الأداة Upgrade Helper هي أداة ويب تساعدك في ترقية تطبيقاتك بتوفير مجموعة كاملة من التغييرات التي تحدث بين أي نسختين. كما يعرض التعليقات في ملفات معينة للمساعدة في فهم سبب الحاجة إلى هذا التغيير.

1. اختر النسخ

تحتاج أولاً إلى التحديد الإصدار الحالي والإصدار الذي ترغب الترقية إليه، تحدد أحدث الإصدارات الرئيسية بشكل افتراضي. بعد ذلك يمكنك الضغط على زر "Show me how to upgrade".

ستظهر التحديثات الرئيسية قسم "useful content" في الأعلى مع روابط لمساعدتك في الترقية.

2. ترقية الاعتماديات

الملف الأول الذي سيظهر هو package.json ومن المستحسن ترقية الاعتماديات الظاهرة فيه، مثلًا إذا ظهرت react-native و react كتغيرات فيمكنك تنصيبه في مشروعك باستخدام yarn add :

# {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff
yarn add react-native@{{VERSION}}
yarn add react@{{REACT_VERSION}}

3. ترقية ملفات مشروعك

قد تحوي الإصدارات الجديدة تحديثات لملفات تولَّد عندما تنفذ npx react-native init، تسرَد هذه الملفات بعد package.json في صفحة Upgrade Helper. تحتاج فقط لإعادة بناء المشروع لتتابع التطوير إذا لم يكن هناك تغيرات أخرى. أما إن وجدت تغيرات أخرى فيمكنك تحديثها يدويًا بنسخها ولصقها في الصفحة أو باستخدام أمر الترقية في React Native CLI بتنفيذ:

npx react-native upgrade

سيؤدي هذا إلى التحقق من ملفاتك مقابل أحدث قالب وتنفيذ ما يلي:

  • إذا وُجِدَ ملفّ جديد في القالب، فسيُنشَأ ببساطة.
  • إذا كان الملف الموجود في القالب مطابقًا لملفّك، فسيُتخطَّى هذا الملفّ.
  • إذا كان هناك ملف في مشروعك يختلف عن الملفّ الموجود في القالب الجديد، فسيُعرض عليك خيار الاحتفاظ بملفك أو الكتابة فوقه باستخدام نسخة القالب الجديد.

ملاحظة: تتطلب بعض الترقيات خطوات يدويّة، مثل الترقيّة من النسخة ‎‎0.28‎‎ إلى النسخة ‎‎0.29‎‎، أو من ‎‎0.56‎‎ إلى ‎‎0.57‎‎. تأكّد من مراجعة ملاحظات الإصدار عند الترقية لتتمكن من التعرّف على أي تغييرات يدوية قد يتطلبها مشروعك.

استكشاف الأخطاء وإصلاحها

أريد الترقية باستخدام React Native CLI لكني لا أستخدم Git

ما دام مشروعك لا يعالَج باستخدام نظام الإصدارات Git (يمكنك استخدام Mercurial أو SVN أو لا شيء) لا زلت بحاجة إلى تثبيت Git على جهازك لتتمكن من استخدام npx react-native upgrade. وتحتاج Git أن تكون متاحة في PATH. إذا لم يستخدم مشروعك Git فقم بتهيئتها ونفذ:

git init # Initialize a Git repository
git add . # Stage all the current files
git commit -m "Upgrade react-native" # Save the current files in a commit

بعد انتهائك من الترقية يمكنك حذف المجلد git..

قمت بالتغييرات كلها ولا زال تطبيقي يستخدم النسخة القديمة

يرتبط هذا النوع من الأخطاء عادة بالتخزين المؤقت (caching). يوصى بتثبيت react-native-clean-project لمسح التخزين المؤقت لمشروعك ثم يمكنك إعادة تشغيله من جديد.

مصادر