الفرق بين المراجعتين ل"ReactNative/troubleshooting"
Basema-bakleh (نقاش | مساهمات) |
|||
| سطر 3: | سطر 3: | ||
== المنفذ قيد الاستخدام (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>. | ||
| سطر 50: | سطر 50: | ||
=== قائمة المعاملات طويلة للغاية: فشل توسيع ترويسة المُعاودة (recursive header expansion failed)=== | === قائمة المعاملات طويلة للغاية: فشل توسيع ترويسة المُعاودة (recursive header expansion failed)=== | ||
| − | في إعدادات بناء المشروع، يُحدّد كل من الإعدادين <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> المكان الذي يجب أن يبحث فيه Xcode عن ملفات ترويسة <code>#import</code> المحددة في الشيفرة البرمجيّة. بالنسبة لملفّات Pod، تستخدم أداة CocoaPods مصفوفة افتراضيّة من مجلدات محددة للبحث فيها. تحقق من أن هذا الإعداد باقٍ على حاله وأنّه لم يتغيّر، وتحقّق من أنّ المجلدات التي ضُبِطَت غير كبيرة للغاية. إذا كان أحد المجلدات كبيرًا، فسيحاول Xcode البحث تعاوديًّا (recursively) في كامل المجلّد وسيرمي الخطأ الذي ورد في الأعلى في مرحلة ما. |
| − | للعودة إلى إعدادات <code>User Search Header Paths</code> و<code>Header Search Paths</code> الافتراضيّة التي حددتها CocoaPods، حدّد الإدخال في لوحة | + | للعودة إلى إعدادات <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. تُهيّأ شيفرة الملء هذه كجزء من وحدة | + | يستعمل إطار 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)== | ||
| − | === | + | ==="Case 1: 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) مُراقبتها. لحلها، نفّذ الأمر التالي في الطرفية: | ||
مراجعة 22:22، 25 مارس 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، فحاول تنفيذ ما يلي:
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
هناك إضافة CocoaPods تسمى cocoapods-fix-react-native تتعامل مع أي إصلاحٍ محتمل للشيفرة المصدر بسبب الاختلافات التي تحدث عند استخدام مدير اعتماديّات.
قائمة المعاملات طويلة للغاية: فشل توسيع ترويسة المُعاودة (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)
"Case 1: Error "code":"ENOSPC","errno":"ENOSPC
هذه المشكلة ناتجة عن عدد المجلّدات التي يُمكن لأداة inotify (المستخدمة من طرف watchman على Linux) مُراقبتها. لحلها، نفّذ الأمر التالي في الطرفية:
echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p