Mukautettujen toimintojen lisääminen React Native Developer Menuun

Perttu LähteenlahtiDeveloper Advocate at RevenueCat · Helsinki, Finland2 min luku
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:

Perttu Lähteenlahti

Kirjoittaja

Developer Advocate at RevenueCat · Helsinki, Finland

Experienced React Native developer with a strong background in mobile app development and user experience design. Specializing in creating performant cross-platform applications with modern JavaScript and TypeScript. Currently working as a Developer Advocate at RevenueCat, helping developers monetize their apps.

React NativeTypeScriptIn-App PurchasesMobile Development
React Native Recap

Saat seuraavan artikkelin suoraan sähköpostiisi

React Native Recap — Pertun uutiskirje joka toinen viikko. Tutoriaaleja, kurattuja linkkejä ja mitä ekosysteemissä kannattaa seurata.

Ilmainen, joka toinen viikko. Peru yhdellä klikkauksella.

✿

Aiheeseen liittyvät artikkelit