javascript - Visa komponenthierarki i React Native

När jag felsöker en React-webbplats kan jag visa komponenthierarkin med hjälp av React Developer Tools:

Hur kan jag göra samma sak i React Native? Rage shake-menyn innehåller en 'inspektör' men det verkar bara låta mig inspektera ett enskilt element genom att trycka på det - jag ser inget sätt att bläddra i hela komponenthierarkin.

Svar #1

Tyvärr, sedan version 0.12 av react-native, fungerar inte Devtools "React"-fliken längre. Det är ett känt problem.

Det finns en ganska aktiv diskussion på Github som har varit öppen ett tag, men inga lösningar än så länge.

UPPDATERING

Devtools-fliken "React" fungerar fortfarande inte i Chrome, men den senaste Nuclide har den inbyggd! (Det är en IDE byggd ovanpå Atom).

Med Atom installerat med Nuclide-paketet, starta din app och avaktivera Chrome- eller Safari-felsökning.

Därefter, genom att trycka på Cmd+Shift+P i Atom, aktiveras kommandopaletten och du kan växla utvecklarverktygen genom att söka efter React Native Inspector:

Svar #2

Detta fungerar för mig med den fristående react-devtools-appen med React Native 0.55.

  1. Kör npm install -g react-devtools
  2. Kör react-devtools
  3. Öppna React Native-appen och välj "Starta fjärr-JS-felsökning" från utvecklingsmenyn