Mukautettujen toimintojen lisääminen React Native Developer Menuun

Kirjoittanut Perttu Lähteenlahti

•
Mukautettujen toimintojen lisääminen React Native Developer Menuun

TLDR: React Native Developer Menuun voi lisätä omia toimintoja. Jos Developer Menu on sinulle jo tuttu, siirry suoraan mukauttamista käsittelevään osioon.

Mikä on React Native Developer Menu

Kun ajat React Native -sovellusta kehitystilassa, käytettävissä on erillinen Developer Menu. Sen voi avata joko ravistamalla fyysistä laitetta (ei simulaattoria) tai käyttämällä seuraavia näppäinoikoteitä:

  • iOS Cmd ⌘ + D
  • Android Cmd ⌘ + M

Jompikumpi näistä avaa Developer Menun, joka näyttää tältä:

React Native Developer menu

Alla on lyhyt kuvaus valikon oletustoiminnoista:

  1. Reload
    Lataa sovelluksen uudelleen käyttäen Metro Bundlerin tuottamaa uusinta JavaScript-koodia.

  2. Open Debugger
    Avaa selaimeen JavaScript-debuggerin Chrome DevToolsin avulla.

  3. Open React DevTools
    Avaa React DevTools -työkalun React-komponenttipuun tarkastelua varten.

  4. Show Inspector
    Aktivoi työkalun, jolla voi tarkastella ja muokata React Native -komponenttien layoutia ja tyylejä.

  5. Show Inspector
    Mahdollistaa käyttöliittymäelementtien tarkastelun napauttamalla niitä.

  6. Disable Fast Refresh
    Poistaa Fast Refresh -toiminnon käytöstä, jolloin sovellus ei lataudu automaattisesti koodimuutosten yhteydessä.

  7. Configure Bundler
    Tarjoaa asetukset Metro Bundlerin konfigurointiin.

  8. Show Perf Monitor
    Näyttää suorituskykymittarin, kuten FPS- ja CPU-käytön, reaaliajassa.

Developer Menun mukauttaminen

React Native mahdollistaa omien valintojen lisäämisen Developer Menuun DevSettings-moduulin kautta.

Tuo DevSettings moduuli react-native-paketista:

← Takaisin artikkeleihin