javascript - Ver la jerarquía de componentes en React Native

Al depurar un sitio web de React, puedo ver la jerarquía de componentes utilizando las herramientas de desarrollo de React:

¿Cómo puedo hacer lo mismo en React Native? El menú de sacudida de ira contiene un 'inspector', pero parece que solo me permite inspeccionar un solo elemento al tocarlo; no veo ninguna manera de explorar toda la jerarquía de componentes.

Respuesta #1

Desafortunadamente, desde la versión 0.12 de react-native, la pestaña "React" de Devtools ya no funciona. Es un problema conocido.

Hay una discusión bastante activa en Github que ha estado abierta por un tiempo, pero aún no hay soluciones.

ACTUALIZACIÓN

La pestaña "React" de Devtools todavía no funciona en Chrome, ¡pero la última versión de Nuclide lo tiene incorporado! (Es un IDE construido sobre Atom).

Con Atom instalado con el paquete Nuclide, inicia tu aplicación y desactiva la depuración en Chrome o Safari.

Luego, presionar Cmd+Shift+P en Atom activará la paleta de comandos y puedes alternar las herramientas de desarrollo buscando React Native Inspector:

Respuesta #2

Esto funciona para mí usando la aplicación independiente react-devtools con React Native 0.55.

1. Ejecute npm install -g react-devtools
2. Ejecute react-devtools
3. Abre la aplicación React Native y selecciona "Iniciar depuración remota de JS" desde el menú de desarrollo