جافا سكريبت - عرض تسلسل المكونات في React Native

عند تصحيح أخطاء موقع React، يمكنني عرض تسلسل المكونات باستخدام أدوات تطوير React:

كيف يمكنني القيام بنفس الشيء في React Native؟ قائمة الاهتزاز الغاضب تحتوي على 'المفحص' ولكنه يبدو أنه يتيح لي فقط فحص عنصر واحد بالنقر عليه - لا أرى أي طريقة لتصفح كامل تسلسل المكونات.

الإجابة رقم 1

لسوء الحظ، منذ الإصدار 0.12 من react-native، لم يعد تبويب "React" في أدوات المطورين يعمل. إنها مشكلة معروفة.

هناك نقاش نشط إلى حد ما على Github مفتوح منذ فترة، ولكن لم توجد حلول بعد.

تحديث

لا تزال علامة تبويب "React" في أدوات المطورين لا تعمل في Chrome، ولكن أحدث إصدار من Nuclide يحتوي عليها مدمجة! (إنه بيئة تطوير متكاملة مبنية على Atom).

مع تثبيت Atom باستخدام حزمة Nuclide، ابدأ تطبيقك وأوقف تصحيح الأخطاء في Chrome أو Safari.

ثم، بالضغط على Cmd+Shift+P في Atom ستقوم بتشغيل لوحة الأوامر ويمكنك تبديل أدوات المطور عن طريق البحث عن React Native Inspector:

الإجابة رقم 2

هذا يعمل بالنسبة لي باستخدام تطبيق react-devtools المستقل مع React Native 0.55.

1. شغّل npm install -g react-devtools
2. شغّل react-devtools
3. افتح تطبيق React Native واختر "بدء تصحيح جافا سكريبت عن بُعد" من قائمة المطور