الفرق بين المراجعتين ل"ReactNative/troubleshooting"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط
 
(3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE: استكشاف الأخطاء وإصلاحها في React Native}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:أخطاء شائعة في React Native}}</noinclude>
 
هذه بعض المشاكل الشائعة التي قد تواجهها أثناء إعداد React Native. إذا واجهتك مشكلة غير مدرجة هنا، فحاول البحث عن المشكلة في [https://github.com/facebook/react-native/issues/ Github].
 
هذه بعض المشاكل الشائعة التي قد تواجهها أثناء إعداد React Native. إذا واجهتك مشكلة غير مدرجة هنا، فحاول البحث عن المشكلة في [https://github.com/facebook/react-native/issues/ Github].
  
 
== المنفذ قيد الاستخدام (Port already in use)==
 
== المنفذ قيد الاستخدام (Port already in use)==
يشتغل مُحزِّم React Native على المنفذ 8081. إذا كانت هناك عملية أخرى تستخدم هذا المنفذ بالفعل، فيمكنك إمّا إنهاء هذه العملية أو تغيير المنفذ الذي يستخدمه المُحزِّم.
+
يشتغل مُحزِّم React Native على المنفذ 8081. إذا كانت هناك عملية أخرى تستخدم هذا المنفذ بالفعل، فيمكنك إمّا إنهاء هذه العملية أو تغيير المنفذ الذي يستخدمه المُجمّع.
  
 
=== إنهاء العملية على المنفذ 8081 ===
 
=== إنهاء العملية على المنفذ 8081 ===
 
نفّذ الأمر التالي للعثور على معرّف (id) العملية التي تُنصِت على المنفذ 8081:
 
نفّذ الأمر التالي للعثور على معرّف (id) العملية التي تُنصِت على المنفذ 8081:
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
$ sudo lsof -i :8081
+
sudo lsof -i :8081
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 
ثم نفّذ ما يلي لإنهاء العملية (مع استبدال ‎‎<code><PID></code>‎‎ بالمُعرّف):
 
ثم نفّذ ما يلي لإنهاء العملية (مع استبدال ‎‎<code><PID></code>‎‎ بالمُعرّف):
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
$ kill -9 <PID>
+
kill -9 <PID>
 
</syntaxhighlight>
 
</syntaxhighlight>
 
على Windows، يمكنك العثور على العملية باستخدام المنفذ 8081 باستخدام [https://stackoverflow.com/questions/48198/how-can-you-find-out-which-process-is-listening-on-a-port-on-windows Resource Monitor] وإيقافها باستخدام مدير المهام (Task Manager).
 
على Windows، يمكنك العثور على العملية باستخدام المنفذ 8081 باستخدام [https://stackoverflow.com/questions/48198/how-can-you-find-out-which-process-is-listening-on-a-port-on-windows Resource Monitor] وإيقافها باستخدام مدير المهام (Task Manager).
سطر 20: سطر 20:
 
يمكنك ضبط المُحزِّم لاستخدام منفذٍ آخر غيرِ المنفذ 8081 باستخدام المعامل ‎‎<code>port</code>‎‎:
 
يمكنك ضبط المُحزِّم لاستخدام منفذٍ آخر غيرِ المنفذ 8081 باستخدام المعامل ‎‎<code>port</code>‎‎:
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
$ react-native start --port=8088
+
npx react-native start --port=8088
 
</syntaxhighlight>
 
</syntaxhighlight>
ستحتاج أيضًا إلى تحديث تطبيقاتك لتحميل حزمة JavaScript من المنفذ الجديد. إذا كنت تُشغّل التطبيق على الجهاز من Xcode، فيمكنك القيام بذلك عن طريق تحديث أماكن تواجد الرقم 8081 وتغييره إلى رقم المنفذ الذي اخترته في ملفّ ‎‎<code>node_modules/react-native/React/React.xcodeproj/project.pbxproj</code>‎‎.
+
ستحتاج أيضًا إلى تحديث تطبيقاتك لتحميل حزمة [[JavaScript]] من المنفذ الجديد. إذا كنت تُشغّل التطبيق على الجهاز من Xcode، فيمكنك القيام بذلك عن طريق تحديث أماكن تواجد الرقم 8081 وتغييره إلى رقم المنفذ الذي اخترته في ملفّ ‎‎<code>node_modules/react-native/React/React.xcodeproj/project.pbxproj</code>‎‎.
  
 
==خطأ قفل NPM==
 
==خطأ قفل NPM==
إذا واجهت خطأ مثل ‎‎<code>npm WARN locking Error: EACCES</code>‎‎ أثناء استخدام أداة React Native CLI، فحاول تنفيذ ما يلي:
+
إذا واجهت خطأ مثل ‎‎<code>npm WARN locking Error: EACCES</code>‎‎ أثناء استخدام أداة React Native CLI (واجهة سطر أوامر React Native)، فحاول تنفيذ ما يلي:
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
sudo chown -R $USER ~/.npm
 
sudo chown -R $USER ~/.npm
سطر 31: سطر 31:
 
</syntaxhighlight>
 
</syntaxhighlight>
 
==مكتبات React مفقودة==
 
==مكتبات React مفقودة==
إذا أضفت React Native يدويًا إلى مشروعك، فتأكد من تضمين جميع الاعتماديات (dependencies) ذات الصلة التي تستخدمها، مثل ‎‎<code>RCTText.xcodeproj</code>‎‎، و‎‎<code>RCTImage.xcodeproj</code>‎‎. بعد ذلك، يجب ربط الثنائيات (binaries) التي تم إنشاؤها بواسطة هذه الاعتماديات بثنائيّة تطبيقك. استخدم قسمي ‎‎<code>Linked Frameworks</code>‎‎ و‎‎<code>Binaries</code>‎‎ في إعدادات مشروع Xcode. للمزيد من التفاصيل، راجع [[ReactNative/linking-libraries-ios|صفحة ربط المكتبات]].  
+
إذا أضفت React Native يدويًا إلى مشروعك، فتأكد من تضمين جميع الاعتماديات (dependencies) ذات الصلة التي تستخدمها، مثل ‎‎<code>RCTText.xcodeproj</code>‎‎، و ‎‎<code>RCTImage.xcodeproj</code>‎‎. بعد ذلك، يجب ربط الثنائيات (binaries) التي تم إنشاؤها بواسطة هذه الاعتماديات بثنائيّة تطبيقك. استخدم قسمي ‎‎<code>Linked Frameworks</code>‎‎ و ‎‎<code>Binaries</code>‎‎ في إعدادات مشروع Xcode. للمزيد من التفاصيل، راجع [[ReactNative/linking libraries ios|صفحة ربط المكتبات]].  
  
إذا كنت تستخدم أداة CocoaPods، فتحقق من أنك أضفت React والمواصفات الفرعية (subspecs) إلى ملفّ <code>Podfile</code>. على سبيل المثال، إذا كنت تستخدم واجهات برمجة التطبيقات ‎‎<code><Text /></code>‎‎، و‎‎<code><Image /></code>‎‎، و‎‎<code>fetch()</code>‎‎، فستحتاج إلى إضافتها في ملف Podfile الخاص بك:
+
إذا كنت تستخدم أداة CocoaPods، فتحقق من أنك أضفت React والمواصفات الفرعية (subspecs) إلى ملفّ <code>Podfile</code>. على سبيل المثال، إذا كنت تستخدم واجهات برمجة التطبيقات ‎‎<code><Text /></code>‎‎، و‎‎<code><Image /></code>‎‎، و‎‎<code>fetch()</code>‎‎، فستحتاج إلى إضافتها في ملف <code>Podfile</code> الخاص بك:
  
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
سطر 47: سطر 47:
  
 
=== لا يُجمَّع React Native عندما يُستخدَم كاعتمادية CocoaPod===
 
=== لا يُجمَّع React Native عندما يُستخدَم كاعتمادية CocoaPod===
هناك إضافة CocoaPods تسمى [https://github.com/orta/cocoapods-fix-react-native cocoapods-fix-react-native] تتعامل مع أي إصلاحٍ محتمل للشيفرة المصدر بسبب الاختلافات التي تحدث عند استخدام مدير اعتماديّات.
+
<blockquote>React Native does not compile when being used as a CocoaPod</blockquote>هناك إضافة CocoaPods تسمى [https://github.com/orta/cocoapods-fix-react-native cocoapods-fix-react-native] تتعامل مع أي إصلاحٍ محتمل للشيفرة المصدر بسبب الاختلافات التي تحدث عند استخدام مدير اعتماديّات.
  
=== قائمة المعاملات طويلة للغاية: فشل توسيع ترويسة المُعاودة (recursive header expansion failed)===
+
=== قائمة المعاملات طويلة للغاية: فشل توسيع ترويسة المُعاودة===
في إعدادات بناء المشروع، يُحدّد كل من الإعدادين ‎‎<code>User Search Header Paths</code>‎‎ و‎‎<code>Header Search Paths</code>‎‎ المكان الذي يجب أن يبحث فيه Xcode عن ملفات ترويسة ‎‎<code>#import</code>‎‎ المحددة في الشيفرة البرمجيّة. بالنسبة لملفّات Pod، تستخدم أداة CocoaPods مصفوفة افتراضيّة من مجلدات محددة للبحث فيها. تحقق من أن هذا الإعداد باقٍ على حاله وأنّه لم يتغيّر، وتحقّق من أنّ المجلدات التي ضُبِطَت غير كبيرة للغاية. إذا كان أحد المجلدات كبيرًا، فسيحاول Xcode البحث تعاوديًّا (recursively) في كامل المجلّد وسيرمي الخطأ ‎‎<code>Argument list too long: recursive header expansion failed</code>‎‎ في مرحلة ما.
+
<blockquote>Argument list too long: recursive header expansion failed</blockquote>في إعدادات بناء المشروع، يُحدّد كل من الإعدادين ‎‎<code>User Search Header Paths</code>‎‎ و ‎‎<code>Header Search Paths</code>‎‎ المكان الذي يجب أن يبحث فيه Xcode عن ملفات ترويسة ‎‎<code>#import</code>‎‎ المحددة في الشيفرة البرمجيّة. بالنسبة لملفّات Pod، تستخدم أداة CocoaPods مصفوفة افتراضيّة من مجلدات محددة للبحث فيها. تحقق من أن هذا الإعداد باقٍ على حاله وأنّه لم يتغيّر، وتحقّق من أنّ المجلدات التي ضُبِطَت غير كبيرة للغاية. إذا كان أحد المجلدات كبيرًا، فسيحاول Xcode البحث تعاوديًّا (recursively) في كامل المجلّد وسيرمي الخطأ الذي ورد في الأعلى في مرحلة ما.
  
للعودة إلى إعدادات ‎‎<code>User Search Header Paths</code>‎‎ و‎‎<code>Header Search Paths</code>‎‎ الافتراضيّة التي حددتها CocoaPods، حدّد الإدخال في لوحة ‎‎<code>Build Settings</code>‎‎، واحذفه عبر الضغط على ‎‎<code>delete</code>‎‎. سيؤدي ذلك إلى إزالة التجاوز المخصص (custom override) والعودة إلى إعدادات CocoaPod الافتراضية.
+
للعودة إلى إعدادات ‎‎<code>User Search Header Paths</code>‎‎ و ‎‎<code>Header Search Paths</code>‎‎ الافتراضيّة التي حددتها CocoaPods، حدّد الإدخال في لوحة ‎‎Build Settings‎‎، واحذفه عبر الضغط على ‎‎delete‎‎. سيؤدي ذلك إلى إزالة التجاوز المخصص (custom override) والعودة إلى إعدادات CocoaPod الافتراضية.
  
 
===خطأ No transports available===
 
===خطأ No transports available===
يستعمل إطار React Native [https://github.com/facebook/react-native/blob/master/Libraries/Core/InitializeCore.js شيفرة ملءٍ] (polyfill) لدعم تقنيّة WebSockets. تُهيّأ شيفرة الملء هذه كجزء من وحدة ‎‎<code>react-native</code>‎‎ التي تُضمِّنها في تطبيقك من خلال الاستيراد ‎‎<code>import React from 'react'</code>‎‎. إذا حمَّلت وحدة أخرى تتطلب WebSockets، مثل [https://github.com/facebook/react-native/issues/3645 Firebase]، فتأكّد من تحميلها أو استيرادها بعد react-native:
+
يستعمل إطار React Native [https://github.com/facebook/react-native/blob/master/Libraries/Core/InitializeCore.js شيفرة تعويض نقص دعم] (polyfill) لإضافة دعم تقنيّة WebSockets. تُهيّأ شيفرة التعويض هذه كجزء من وحدة ‎‎react-native‎‎ التي تُضمِّنها في تطبيقك من خلال الاستيراد ‎‎<code>import React from 'react'</code>‎‎. إذا حمَّلت وحدة أخرى تتطلب WebSockets، مثل [https://github.com/facebook/react-native/issues/3645 Firebase]، فتأكّد من تحميلها أو استيرادها بعد react-native:
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
import React from 'react';
 
import React from 'react';
سطر 72: سطر 72:
 
إذا واجهت مشكلة توقّف الأمر ‎‎<code>react-native init</code>‎‎ عن الاستجابة، فجرّب تنفيذ الأمر مرّة أخرى في الوضع المُفصّل وانظر [https://github.com/facebook/react-native/issues/2797 هذه الصفحة] لبعض الأسباب الشائعة لهذه المشكلة:
 
إذا واجهت مشكلة توقّف الأمر ‎‎<code>react-native init</code>‎‎ عن الاستجابة، فجرّب تنفيذ الأمر مرّة أخرى في الوضع المُفصّل وانظر [https://github.com/facebook/react-native/issues/2797 هذه الصفحة] لبعض الأسباب الشائعة لهذه المشكلة:
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
react-native init --verbose
+
npx react-native init --verbose
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 
==لا يُمكن تشغيل مدير حزم react-native (على Linux)==
 
==لا يُمكن تشغيل مدير حزم react-native (على Linux)==
===‎‎<code>Error "code":"ENOSPC","errno":"ENOSPC"</code>‎‎===
+
==="‎‎Error "code":"ENOSPC","errno":"ENOSPC===
 
هذه المشكلة ناتجة عن عدد المجلّدات التي يُمكن لأداة [https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers inotify] (المستخدمة من طرف watchman على Linux) مُراقبتها. لحلها، نفّذ الأمر التالي في الطرفية:
 
هذه المشكلة ناتجة عن عدد المجلّدات التي يُمكن لأداة [https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers inotify] (المستخدمة من طرف watchman على Linux) مُراقبتها. لحلها، نفّذ الأمر التالي في الطرفية:
  
سطر 85: سطر 85:
 
* [https://facebook.github.io/react-native/docs/troubleshooting صفحة Troubleshooting في توثيق React Native الرسمي.]
 
* [https://facebook.github.io/react-native/docs/troubleshooting صفحة Troubleshooting في توثيق React Native الرسمي.]
 
[[تصنيف:ReactNative]]
 
[[تصنيف:ReactNative]]
 +
[[تصنيف:React Native Docs]]

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

هذه بعض المشاكل الشائعة التي قد تواجهها أثناء إعداد React Native. إذا واجهتك مشكلة غير مدرجة هنا، فحاول البحث عن المشكلة في Github.

المنفذ قيد الاستخدام (Port already in use)

يشتغل مُحزِّم React Native على المنفذ 8081. إذا كانت هناك عملية أخرى تستخدم هذا المنفذ بالفعل، فيمكنك إمّا إنهاء هذه العملية أو تغيير المنفذ الذي يستخدمه المُجمّع.

إنهاء العملية على المنفذ 8081

نفّذ الأمر التالي للعثور على معرّف (id) العملية التي تُنصِت على المنفذ 8081:

 sudo lsof -i :8081

ثم نفّذ ما يلي لإنهاء العملية (مع استبدال ‎‎<PID>‎‎ بالمُعرّف):

 kill -9 <PID>

على Windows، يمكنك العثور على العملية باستخدام المنفذ 8081 باستخدام Resource Monitor وإيقافها باستخدام مدير المهام (Task Manager).

استخدام منفذ آخر غير المنفذ 8081

يمكنك ضبط المُحزِّم لاستخدام منفذٍ آخر غيرِ المنفذ 8081 باستخدام المعامل ‎‎port‎‎:

npx react-native start --port=8088

ستحتاج أيضًا إلى تحديث تطبيقاتك لتحميل حزمة JavaScript من المنفذ الجديد. إذا كنت تُشغّل التطبيق على الجهاز من Xcode، فيمكنك القيام بذلك عن طريق تحديث أماكن تواجد الرقم 8081 وتغييره إلى رقم المنفذ الذي اخترته في ملفّ ‎‎node_modules/react-native/React/React.xcodeproj/project.pbxproj‎‎.

خطأ قفل NPM

إذا واجهت خطأ مثل ‎‎npm WARN locking Error: EACCES‎‎ أثناء استخدام أداة React Native CLI (واجهة سطر أوامر React Native)، فحاول تنفيذ ما يلي:

sudo chown -R $USER ~/.npm
sudo chown -R $USER /usr/local/lib/node_modules

مكتبات React مفقودة

إذا أضفت React Native يدويًا إلى مشروعك، فتأكد من تضمين جميع الاعتماديات (dependencies) ذات الصلة التي تستخدمها، مثل ‎‎RCTText.xcodeproj‎‎، و ‎‎RCTImage.xcodeproj‎‎. بعد ذلك، يجب ربط الثنائيات (binaries) التي تم إنشاؤها بواسطة هذه الاعتماديات بثنائيّة تطبيقك. استخدم قسمي ‎‎Linked Frameworks‎‎ و ‎‎Binaries‎‎ في إعدادات مشروع Xcode. للمزيد من التفاصيل، راجع صفحة ربط المكتبات.

إذا كنت تستخدم أداة CocoaPods، فتحقق من أنك أضفت React والمواصفات الفرعية (subspecs) إلى ملفّ Podfile. على سبيل المثال، إذا كنت تستخدم واجهات برمجة التطبيقات ‎‎<Text />‎‎، و‎‎<Image />‎‎، و‎‎fetch()‎‎، فستحتاج إلى إضافتها في ملف Podfile الخاص بك:

pod 'React', :path => '../node_modules/react-native', :subspecs => [
  'RCTText',
  'RCTImage',
  'RCTNetwork',
  'RCTWebSocket',
]

بعد ذلك، تأكد من تنفيذ الأمر ‎‎pod install‎‎ وتأكّد كذلك من أنه قد تم إنشاء المجلد ‎‎Pods/‎‎ في مشروعك مع تثبيت React. سوف تُرشدك أداة CocoaPods إلى استخدام ملف ‎‎.xcworkspace‎‎ المُولَّد حديثًا من الآن فصاعداً للتمكّن من استخدام هذه الاعتماديّات المثبّتة.

لا يُجمَّع React Native عندما يُستخدَم كاعتمادية CocoaPod

React Native does not compile when being used as a CocoaPod

هناك إضافة CocoaPods تسمى cocoapods-fix-react-native تتعامل مع أي إصلاحٍ محتمل للشيفرة المصدر بسبب الاختلافات التي تحدث عند استخدام مدير اعتماديّات.

قائمة المعاملات طويلة للغاية: فشل توسيع ترويسة المُعاودة

Argument list too long: recursive header expansion failed

في إعدادات بناء المشروع، يُحدّد كل من الإعدادين ‎‎User Search Header Paths‎‎ و ‎‎Header Search Paths‎‎ المكان الذي يجب أن يبحث فيه Xcode عن ملفات ترويسة ‎‎#import‎‎ المحددة في الشيفرة البرمجيّة. بالنسبة لملفّات Pod، تستخدم أداة CocoaPods مصفوفة افتراضيّة من مجلدات محددة للبحث فيها. تحقق من أن هذا الإعداد باقٍ على حاله وأنّه لم يتغيّر، وتحقّق من أنّ المجلدات التي ضُبِطَت غير كبيرة للغاية. إذا كان أحد المجلدات كبيرًا، فسيحاول Xcode البحث تعاوديًّا (recursively) في كامل المجلّد وسيرمي الخطأ الذي ورد في الأعلى في مرحلة ما.

للعودة إلى إعدادات ‎‎User Search Header Paths‎‎ و ‎‎Header Search Paths‎‎ الافتراضيّة التي حددتها CocoaPods، حدّد الإدخال في لوحة ‎‎Build Settings‎‎، واحذفه عبر الضغط على ‎‎delete‎‎. سيؤدي ذلك إلى إزالة التجاوز المخصص (custom override) والعودة إلى إعدادات CocoaPod الافتراضية.

خطأ No transports available

يستعمل إطار React Native شيفرة تعويض نقص دعم (polyfill) لإضافة دعم تقنيّة WebSockets. تُهيّأ شيفرة التعويض هذه كجزء من وحدة ‎‎react-native‎‎ التي تُضمِّنها في تطبيقك من خلال الاستيراد ‎‎import React from 'react'‎‎. إذا حمَّلت وحدة أخرى تتطلب WebSockets، مثل Firebase، فتأكّد من تحميلها أو استيرادها بعد react-native:

import React from 'react';
import Firebase from 'firebase';

استثناء ‎‎ShellCommandUnresponsiveException‎‎

إذا واجهك استثناء ‎‎ShellCommandUnresponsiveException‎‎ بشكل مشابه لما يلي:

Execution failed for task ':app:installDebug'.
  com.android.builder.testing.api.DeviceException: com.android.ddmlib.ShellCommandUnresponsiveException

فجرّب تخفيض إصدار Gradle إلى 1.2.3 في ملفّ ‎‎android/build.gradle‎‎.

عدم استجابة الأمر ‎‎react-native init‎‎

إذا واجهت مشكلة توقّف الأمر ‎‎react-native init‎‎ عن الاستجابة، فجرّب تنفيذ الأمر مرّة أخرى في الوضع المُفصّل وانظر هذه الصفحة لبعض الأسباب الشائعة لهذه المشكلة:

npx react-native init --verbose

لا يُمكن تشغيل مدير حزم react-native (على Linux)

"‎‎Error "code":"ENOSPC","errno":"ENOSPC

هذه المشكلة ناتجة عن عدد المجلّدات التي يُمكن لأداة inotify (المستخدمة من طرف watchman على Linux) مُراقبتها. لحلها، نفّذ الأمر التالي في الطرفية:

echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

مصادر