الفرق بين المراجعتين لصفحة: «ReactNative/troubleshooting»
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
|||
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: | <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 | |||
</syntaxhighlight> | </syntaxhighlight> | ||
ثم نفّذ ما يلي لإنهاء العملية (مع استبدال <code><PID></code> بالمُعرّف): | ثم نفّذ ما يلي لإنهاء العملية (مع استبدال <code><PID></code> بالمُعرّف): | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
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"> | ||
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 | إذا واجهت خطأ مثل <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>، | إذا أضفت 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] تتعامل مع أي إصلاحٍ محتمل للشيفرة المصدر بسبب الاختلافات التي تحدث عند استخدام مدير اعتماديّات. | ||
=== قائمة المعاملات طويلة للغاية: فشل توسيع ترويسة المُعاودة | === قائمة المعاملات طويلة للغاية: فشل توسيع ترويسة المُعاودة=== | ||
في إعدادات بناء المشروع، يُحدّد كل من الإعدادين <code>User Search Header Paths</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>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 شيفرة | يستعمل إطار 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)== | ||
=== | ==="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