javascript - Näytä komponenttihierarkia React Nativenessa

Kun virheenkorjataan React-verkkosivustoa, voin tarkastella komponenttien hierarkiaa käyttämällä React Developer Toolsia:

Kuinka voin tehdä saman React Nativessa? Rage shake -valikossa on 'inspector', mutta se näyttää vain antavan minun tarkastella yhtä elementtiä napauttamalla sitä - en näe tapaa selata koko komponenttihierarkiaa.

Vastaus #1

Valitettavasti react-nativen version 0.12 jälkeen Devtoolsin "React"-välilehti ei enää toimi. Se on tunnettu ongelma.

Githubissa on melko aktiivinen keskustelu, joka on ollut auki jo jonkin aikaa, mutta ratkaisuja ei ole vielä löytynyt.

PÄIVITYS

Devtoolsin "React"-välilehti ei toimi edelleen Chromessa, mutta uusin Nuclide sisältää sen sisäänrakennettuna! (Se on Atom-pohjainen IDE).

Kun Atom on asennettuna Nuclide-paketin kanssa, käynnistä sovelluksesi ja poista Chromen tai Safarin virheenkorjaus käytöstä.

Sitten Cmd+Shift+P -näppäinyhdistelmää painamalla Atomissa avautuu komentopaletti, ja voit vaihtaa kehitystyökalut päälle etsimällä React Native Inspectorin:

Vastaus #2

Tämä toimii minulle käyttäen erillistä react-devtools-sovellusta React Native 0.55:n kanssa.

1. Suorita npm install -g react-devtools
2. Suorita react-devtools
3. Avaa React Native -sovellus ja valitse kehittäjävalikosta "Käynnistä etä-JS-virheenkorjaus"