javascript - Vis komponenthierarki i React Native

Når jeg feilsøker et React-nettsted, kan jeg se komponenthierarkiet ved hjelp av React Developer Tools:

Hvordan kan jeg gjøre det samme i React Native? Rage shake-menyen inneholder en 'inspector', men den ser bare ut til å la meg inspisere ett enkelt element ved å trykke på det - jeg ser ingen måte å bla gjennom hele komponenthierarkiet på.

Svar #1

Dessverre, siden versjon 0.12 av react-native, fungerer ikke Devtools "React"-fanen lenger. Det er et kjent problem.

Det er en ganske aktiv diskusjon på Github som har vært åpen en stund, men ingen løsninger ennå.

OPPDATERING

Devtools "React"-fanen fungerer fortsatt ikke i Chrome, men den nyeste versjonen av Nuclide har det innebygd! (Det er et IDE bygget på toppen av Atom).

Med Atom installert med Nuclide-pakken, start appen din og deaktiver feilsøking i Chrome eller Safari.

Deretter vil det å trykke Cmd+Shift+P i Atom utløse kommandopaletten, og du kan bytte dev-verktøyene ved å søke etter React Native Inspector:

Svar #2

Dette fungerer for meg ved bruk av den frittstående react-devtools-appen med React Native 0.55.

  1. Kjør npm install -g react-devtools
  2. Kjør react-devtools
  3. Åpne React Native-appen og velg «Start fjern-JS-feilsøking» fra utviklermenyen