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

المراجعة الحالية بتاريخ 13:39، 9 أكتوبر 2021

ستمنحك الترقية إلى إصدارات جديدة من 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>
+<noinclude>{{DISPLAYTITLE: الترقية إلى إصدارات جديدة من React Native}}</noinclude>ستمنحك الترقية إلى إصدارات جديدة من React Native إمكانية الوصول إلى المزيد من واجهات برمجة التطبيقات (API)، والواجهات وأدوات المطورين وغير ذلك من ميّزات. تتطلب الترقية بذل القليل من المجهود، لكنّ فريق React Native يعمل على تسهيل الأمر.
-==الترقية إلى إصدارات React Native الجديدة==
-ستمنحك الترقية إلى إصدارات جديدة من React Native إمكانية الوصول إلى المزيد من واجهات برمجة التطبيقات (API)، والعروض وأدوات المطورين وغير ذلك من ميّزات. تتطلب الترقية بذل القليل من المجهود، لكنّ فريق React Native يعمل على تسهيل الأمر.
 ==مشاريع Expo==
@@ سطر 9: / سطر 7: @@
 ==مشاريع 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 باستخدام <code>git apply</code> مع دمج ثلاثي الاتجاهات (‎3-way merge‎)، لذا يجب استخدام Git ليعمل.
-رغم أن مشروعك لا يتطلّب إدارته بواسطة نظام إدارة النسخ Git، (إذ يمكنك استخدام Mercurial أو SVN أو لا شيء) إلّا أنّك بحاجة إلى تثبيت Git على نظامك لاستخدام الأمر ‎‎<code>react-native upgrade</code>‎‎. ينبغي على Git كذلك أن يكون متاحًا في متغيّر <code>PATH</code> الخاص بالنظام. إذا لم تكن تستخدم Git في مشروعك، فنفّذ التهيئة (init) والإضافة (add)، والإيداع (commit):
+نفذ الأمر التالي للترقية إلى الإصدار الأخير:<syntaxhighlight lang="javascript">
-<syntaxhighlight lang="javascript">
+npx react-native upgrade
-git init
-git add .
-git commit -m "upgrade RN"
-</syntaxhighlight>
-يمكنك حذف مجلّد ‎‎<code>.git</code>‎‎ بعد الانتهاء من الترقيّة وحل التعارضات (conflicts).
-====2. نفّذ أمر الترقية====
-نفّذ الأمر التالي لبدء عملية الترقية إلى أحدث إصدار:
-<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: / سطر 43: @@
 =======
      CURRENT_PROJECT_VERSION = 1;
->>>>>>> هُم
+>>>>>>> هم
      HEADER_SEARCH_PATHS = (
        "$(inherited)",
@@ سطر 66: / سطر 54: @@
 هنا كلمة "نحن" تُمثّل شيفرتك أو شيفرة فريقك و"هم" تُمثّل "فريق تطوير React Native".
-=== بديل ===
+=== الأداة Upgrade Helper ===
-استخدم هذه الخطوات فقط في حالة فشل ما سبق.
+الأداة Upgrade Helper هي أداة ويب تساعدك في ترقية تطبيقاتك بتوفير مجموعة كاملة من التغييرات التي تحدث بين أي نسختين. كما يعرض التعليقات في ملفات معينة للمساعدة في فهم سبب الحاجة إلى هذا التغيير.
-====1. ترقية اعتمادية ‎‎<code>react-native</code>‎‎====
+==== 1. اختر النسخ ====
-تحقّق من أحدث إصدار من حزمة <code>react-native</code>‎‎ في npm [https://www.npmjs.com/package/react-native من هنا] (أو استخدم الأمر ‎‎<code>npm info react-native</code>‎‎ ).
+تحتاج أولاً إلى التحديد الإصدار الحالي والإصدار الذي ترغب الترقية إليه، تحدد أحدث الإصدارات الرئيسية بشكل افتراضي. بعد ذلك يمكنك الضغط على زر  "Show me how to upgrade".
-ثبّت الآن هذا الإصدار من ‎‎<code>react-native</code>‎‎ في مشروعك باستخدام ‎‎<code>npm install --save</code>‎‎ مع استبدال ‎‎<code>X.Y</code>‎‎ برقم النسخة التي تريد الترقية إليها:
+ستظهر التحديثات الرئيسية قسم "useful content" في الأعلى مع روابط لمساعدتك في الترقية.
-<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>‎‎ عبر الأمر:
+==== 2. ترقية الاعتماديات ====
-<syntaxhighlight lang="javascript">
+الملف الأول الذي سيظهر هو <code>package.json</code>  ومن المستحسن ترقية الاعتماديات الظاهرة فيه، مثلًا إذا ظهرت <code>react-native</code> و <code>react</code> كتغيرات فيمكنك تنصيبه في مشروعك باستخدام <code>yarn add</code> :<syntaxhighlight lang="javascript">
-npm install --save react@R
+# {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff
+yarn add react-native@{{VERSION}}
+yarn add react@{{REACT_VERSION}}
 </syntaxhighlight>
-مع استبدال ‎‎<code>R</code>‎‎ بالنسخة الجديدة من ‎‎<code>react</code>‎‎ اعتمادًا على التحذير أعلاه.
-====2. ترقية قوالب مشروعك====
+==== 3. ترقية ملفات مشروعك ====
-قد تحتوي حزمة npm الجديدة على تحديثات للملفات التي تُولَّد عادةً عند تنفيذ الأمر ‎‎<code>react-native init</code>‎‎، مثل مشاريع iOS وAndroid الفرعية.
-يمكنك الرجوع إلى [https://github.com/pvinis/rn-diff-purge rn-diff-purge] لمعرفة ما إذا كانت هناك تغييرات في ملفات قالب المشروع. في حال لم يكن هناك أي تغييرات، فأعِد ببساطة بناء المشروع وواصل التطوير. في حالة وجود تغييرات طفيفة، يمكنك تحديث المشروع يدويًا وإعادة البناء.
+قد تحوي الإصدارات الجديدة تحديثات لملفات تولَّد عندما تنفذ <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 ملاحظات الإصدار] عند الترقية لتتمكن من التعرّف على أي تغييرات يدوية قد يتطلبها مشروعك.
-إذا كانت هناك تغييرات كبيرة، فنفّذ الأمر التالي في الطرفيّة للحصول عليها:
+=== استكشاف الأخطاء وإصلاحها ===
-<syntaxhighlight lang="javascript">
-$ react-native upgrade
+==== أريد الترقية باستخدام React Native CLI لكني لا أستخدم Git ====
-</syntaxhighlight>
-سيؤدي هذا إلى التحقق من ملفاتك مقابل أحدث قالب وتنفيذ ما يلي:
-** إذا وُجِدَ ملفّ جديد في القالب، فسيُنشَأ ببساطة.
+ما دام مشروعك لا يعالَج باستخدام  نظام الإصدارات 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]]
+[[تصنيف:React Native Docs]]