الفرق بين المراجعتين لصفحة: «ReactNative/upgrading»

مراجعة 19:04، 2 أبريل 2021

الترقية إلى إصدارات 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 لمسح التخزين المؤقت لمشروعك ثم يمكنك إعادة تشغيله من جديد.

مصادر

صفحة Upgrading to new React Native versions في توثيق React Native الرسمي.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE: الترقية إلى إصدارات جديدة في React Native}}</noinclude>
 ==الترقية إلى إصدارات React Native الجديدة==
 ستمنحك الترقية إلى إصدارات جديدة من React Native إمكانية الوصول إلى المزيد من واجهات برمجة التطبيقات (API)، والعروض وأدوات المطورين وغير ذلك من ميّزات. تتطلب الترقية بذل القليل من المجهود، لكنّ فريق React Native يعمل على تسهيل الأمر.
@@ سطر 9: / سطر 10: @@
 ==مشاريع React Native==
-لأنّ مشاريع React Native النموذجية تتكون أساسًا من مشروع Android ومشروع iOS ومشروع JavaScript، فإنّ الترقية قد تكون صعبة إلى حد ما. إليك ما تحتاج إلى القيام به للترقية من إصدار أقدم من React Native.
+لأنّ مشاريع React Native النموذجية تتكون أساسًا من مشروع Android ومشروع iOS ومشروع JavaScript، فإنّ الترقية قد تكون صعبة إلى حد ما. توجد طريقتان للترقية من إصدار أقدم من React Native هما React Native CLI أو الترقية اليدوية.
-===الترقية اعتمادا على Git===
+===React Native CLI===
 تأتي أداة React Native CLI مع أمر الترقية ‎‎<code>upgrade</code>‎‎ الذي يسمح بترقية الملفات المصدريّة بخطوة واحدة مع الحد الأدنى من التعارضات، وذلك بفضل مشروع [https://github.com/react-native-community/rn-diff-purge rn-diff-purge].
-====1. تأكد من أن مشروعك يستخدم Git====
+====1. نفذ الأمر <code>upgrade</code>====
-'''ملاحظة:''' تنطبق هذه الخطوة فقط على المشاريع التي لا تستخدم Git. تخطّاها إذا كنت تستخدم Git.
-رغم أن مشروعك لا يتطلّب إدارته بواسطة نظام إدارة النسخ Git، (إذ يمكنك استخدام Mercurial أو SVN أو لا شيء) إلّا أنّك بحاجة إلى تثبيت Git على نظامك لاستخدام الأمر ‎‎<code>react-native upgrade</code>‎‎. ينبغي على Git كذلك أن يكون متاحًا في متغيّر <code>PATH</code> الخاص بالنظام. إذا لم تكن تستخدم Git في مشروعك، فنفّذ التهيئة (init) والإضافة (add)، والإيداع (commit):
+يعمل هذا الأمر أعلى نظام إدارة النسخ Git باستخدام <code>git apply</code> مع دمج ثلاثي الاتجاهات (‎3-way merge‎)، لذا يجب استخدام Git ليعمل.
-<syntaxhighlight lang="javascript">
-git init
-git add .
-git commit -m "upgrade RN"
-</syntaxhighlight>
-يمكنك حذف مجلّد ‎‎<code>.git</code>‎‎ بعد الانتهاء من الترقيّة وحل التعارضات (conflicts).
-====2. نفّذ أمر الترقية====
+نفذ الأمر التالي للترقية إلى الإصدار الأخير<syntaxhighlight lang="javascript">
-نفّذ الأمر التالي لبدء عملية الترقية إلى أحدث إصدار:
+npx react-native upgrade
-<syntaxhighlight lang="javascript">
-react-native upgrade
 </syntaxhighlight>
 يمكنك تحديد إصدار React Native عن طريق تمرير مُعامل للأمر، على سبيل المثال، نفّذ الأمر التالي للترقية إلى الإصدار ‎‎<code>0.59.0-rc.0</code>‎‎:
 <syntaxhighlight lang="javascript">
-react-native upgrade 0.59.0-rc.0
+npx react-native upgrade 0.61.0-rc.0
 </syntaxhighlight>
 يُرقّى المشروع باستخدام ‎‎<code>git apply</code>‎‎ مع دمج ثلاثي الاتجاهات (‎3-way merge‎). لهذا السبب قد تحتاج إلى حل بعض التعارضات.
-====3. حل التعارضات====
+====2. حل التعارضات====
 تتضمن الملفات المتعارضة علامات توضّح بوضوح من أين تأتي التغييرات. فمثلا:
 <syntaxhighlight lang="javascript">
@@ سطر 55: / سطر 46: @@
 =======
      CURRENT_PROJECT_VERSION = 1;
->>>>>>> هُم
+>>>>>>> هم
      HEADER_SEARCH_PATHS = (
        "$(inherited)",
@@ سطر 66: / سطر 57: @@
 هنا كلمة "نحن" تُمثّل شيفرتك أو شيفرة فريقك و"هم" تُمثّل "فريق تطوير React Native".
-=== بديل ===
+== الأداة Upgrade Helper ==
-استخدم هذه الخطوات فقط في حالة فشل ما سبق.
+الأداة Upgrade Helper هي أداة ويب تساعدك في ترقية تطبيقاتك بتوفير مجموعة كاملة من التغييرات التي تحدث بين أي نسختين. كما يعرض التعليقات في ملفات معينة للمساعدة في فهم سبب الحاجة إلى هذا التغيير.
-====1. ترقية اعتمادية ‎‎<code>react-native</code>‎‎====
-تحقّق من أحدث إصدار من حزمة <code>react-native</code>‎‎ في npm [https://www.npmjs.com/package/react-native من هنا] (أو استخدم الأمر ‎‎<code>npm info react-native</code>‎‎ ).
-ثبّت الآن هذا الإصدار من ‎‎<code>react-native</code>‎‎ في مشروعك باستخدام ‎‎<code>npm install --save</code>‎‎ مع استبدال ‎‎<code>X.Y</code>‎‎ برقم النسخة التي تريد الترقية إليها:
-<syntaxhighlight lang="javascript">
-$ npm install --save react-native@X.Y
-# where X.Y is the semantic version you are upgrading to
-npm WARN peerDependencies The peer dependency react@~R included from react-native...
-</syntaxhighlight>
-إذا واجهك تحذير يشمل كلمة peerDependency، فعليك كذلك ترقية ‎‎<code>react</code>‎‎ عبر الأمر:
-<syntaxhighlight lang="javascript">
-npm install --save react@R
-</syntaxhighlight>
-مع استبدال ‎‎<code>R</code>‎‎ بالنسخة الجديدة من ‎‎<code>react</code>‎‎ اعتمادًا على التحذير أعلاه.
-====2. ترقية قوالب مشروعك====
+=== 1. اختر النسخ ===
-قد تحتوي حزمة npm الجديدة على تحديثات للملفات التي تُولَّد عادةً عند تنفيذ الأمر ‎‎<code>react-native init</code>‎‎، مثل مشاريع iOS وAndroid الفرعية.
+تحتاج أولاً إلى التحديد الإصدار الحالي والإصدار الذي ترغب الترقية إليه، تحدد أحدث الإصدارات الرئيسية بشكل افتراضي. بعد ذلك يمكنك الضغط على زر  "Show me how to upgrade".
-يمكنك الرجوع إلى [https://github.com/pvinis/rn-diff-purge rn-diff-purge] لمعرفة ما إذا كانت هناك تغييرات في ملفات قالب المشروع. في حال لم يكن هناك أي تغييرات، فأعِد ببساطة بناء المشروع وواصل التطوير. في حالة وجود تغييرات طفيفة، يمكنك تحديث المشروع يدويًا وإعادة البناء.
+ستظهر التحديثات الرئيسية قسم "useful content" في الأعلى مع روابط لمساعدتك في الترقية.
-إذا كانت هناك تغييرات كبيرة، فنفّذ الأمر التالي في الطرفيّة للحصول عليها:
+=== 2. ترقية الاعتماديات ===
-<syntaxhighlight lang="javascript">
+الملف الأول الذي سيظهر هو <code>package.json</code>  ومن المستحسن ترقية الاعتماديات الظاهرة فيه، مثلًا إذا ظهرت <code>react-native</code> و <code>react</code> كتغيرات فيمكنك تنصيبه في مشروعك باستخدام <code>yarn add</code> :<syntaxhighlight lang="javascript">
-$ react-native upgrade
+# {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff
+yarn add react-native@{{VERSION}}
+yarn add react@{{REACT_VERSION}}
 </syntaxhighlight>
-سيؤدي هذا إلى التحقق من ملفاتك مقابل أحدث قالب وتنفيذ ما يلي:
+=== 3. ترقية ملفات مشروعك ===
+قد تحوي الإصدارات الجديدة تحديثات لملفات تولَّد عندما تنفذ <code>npx react-native init</code>،  تسرَد هذه الملفات بعد <code>package.json</code> في صفحة Upgrade Helper. تحتاج فقط لإعادة بناء المشروع لتتابع التطوير إذا لم يكن هناك تغيرات أخرى. أما إن وجدت تغيرات أخرى فيمكنك تحديثها يدويًا بنسخها ولصقها في الصفحة أو باستخدام أمر الترقية في React Native CLI  بتنفيذ:<syntaxhighlight lang="javascript">
+npx react-native upgrade
+</syntaxhighlight>سيؤدي هذا إلى التحقق من ملفاتك مقابل أحدث قالب وتنفيذ ما يلي:
 * إذا وُجِدَ ملفّ جديد في القالب، فسيُنشَأ ببساطة.
 * إذا كان الملف الموجود في القالب مطابقًا لملفّك، فسيُتخطَّى هذا الملفّ.
 * إذا كان هناك ملف في مشروعك يختلف عن الملفّ الموجود في القالب الجديد، فسيُعرض عليك خيار الاحتفاظ بملفك أو الكتابة فوقه باستخدام نسخة القالب الجديد.
+ملاجظة: تتطلب بعض الترقيات خطوات يدويّة، مثل الترقيّة من النسخة ‎‎<code>0.28</code>‎‎ إلى النسخة ‎‎<code>0.29</code>‎‎، أو من ‎‎<code>0.56</code>‎‎ إلى ‎‎<code>0.57</code>‎‎. تأكّد من مراجعة [https://github.com/facebook/react-native/releases ملاحظات الإصدار] عند الترقية لتتمكن من التعرّف على أي تغييرات يدوية قد يتطلبها مشروعك.
+== استكشاف الأخطاء وإصلاحها ==
+=== أريد الترقية باستخدام React Native CLI لكني لا أستخدم Git ===
+ما دام مشروعك لا يعالَج باستخدام  نظام الإصدارات Git (يمكنك استخدام Mercurial أو SVN أو لا شيء)لا زلت بحاجة إلى [https://git-scm.com/downloads تنصيب Git] على جهازك لتتمكن من استخدام npx react-native upgrade. وتحتاج Git أن تكون متاحة في PATH. إذا لم يستخدم مشروعك Git فقم بتهيئتها ونفذ:<syntaxhighlight lang="javascript">
+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
+</syntaxhighlight>بعد انتهائك من الترقية يمكنك حذف المجلد <code>git.</code>
-==الترقية يدويا==
+=== قمت بالتغييرات كلها ولا زال تطبيقي يستخدم النسخة القديمة ===
-تتطلب بعض الترقيات خطوات يدويّة، مثل الترقيّة من النسخة ‎‎<code>0.28</code>‎‎ إلى النسخة ‎‎<code>0.29</code>‎‎، أو من ‎‎<code>0.56</code>‎‎ إلى ‎‎<code>0.57</code>‎‎. تأكّد من مراجعة [https://github.com/facebook/react-native/releases ملاحظات الإصدار] عند الترقية لتتمكن من التعرّف على أي تغييرات يدوية قد يتطلبها مشروعك.
+يرتبط هذا النوع من الأخطاء عادة بالتخزين المؤقت (caching). يوصى بتنصيب  [https://github.com/pmadruga/react-native-clean-project react-native-clean-project] لمسح التخزين المؤقت لمشروعك ثم يمكنك إعادة تشغيله من جديد.
 == مصادر ==
 * [https://facebook.github.io/react-native/docs/upgrading صفحة Upgrading to new React Native versions في توثيق React Native الرسمي.]
 [[تصنيف:ReactNative]]