9 triků, které vám usnadní vývoj React Native

Všichni souhlasíme s tím, že React Native je skvělý způsob, jak vyvíjet mobilní aplikace. Ale v procesu vytváření mobilní aplikace, kromě nekonečných hodin strávených čtením dokumentace a laděním nějakého špatně implementovaného balíčku, narazíte na situaci, která vás přiměje přemýšlet „hmm, zajímalo by mě, jestli existuje jednodušší způsob, jak to udělat“. Přináším vám tedy několik triků, které jsem se naučil během let vývoje aplikací React Native, a přeji si, aby mi je někdo řekl před lety. Doufám, že najdete něco užitečného pro sebe, začněme!

1. Otevřete nový terminál ve stejné složce – z terminálu (pouze Mac)

Váš pracovní den pravděpodobně začíná otevřením terminálu, přechodem do složky projektu a spuštěním yarn android nebo/a yarn start . Ale po nějaké době budete muset nainstalovat nějaký balíček React Native nebo spustit nějaký složitý příkaz git a chcete mít další okno Terminálu ve stejné složce. Takže stisknutím cmd + N otevřete nové okno Terminál a přejděte v terminálu do složky projektu. Pro usnadnění této věci můžete spustit open -a Terminal \$(pwd) v terminálu, který v podstatě otevře aplikaci Terminál v požadované složce, kterou v našem případě lze získat pomocí pwd příkaz. Tento příkaz je však příliš dlouhý na zapsání a zapamatování, takže jej můžete přidat do souboru .zshrc soubor jako alias alias nt="open -a Terminal \$(pwd)" . Po restartování aplikace Terminál, pokud spustíte nt příkaz (alias jsem pojmenoval nt pro n ew t erminal, můžete mu říkat, jak chcete), dostanete nové okno Terminálu ve stejném adresáři, ze kterého jste spustili nt příkaz.

2. Simulujte oznámení push v systému iOS

Řekněme, že děláte nějaké push notifikace a chcete rychle otestovat, jak vaše aplikace reaguje na přijetí push notifikace. Místo ručního spouštění oznámení push provedením nějaké akce v aplikaci nebo odesláním oznámení z řídicího panelu můžete vytvořit upozornění fication.apns soubor a přetáhněte jej do okna Simulátoru! A co přesně je v notification.apns soubor? No, vypadá to takto:

{
 "Simulator Target Bundle": "com.example.simpush",
 "aps": {
   "alert": {
     "title": "New notification!",
     "subtitle": "notification.apns triggered notification",
     "body": "Hello there!"
   },
   "sound": "default"
 },
 "custom": {
   "test": "something",
 }
}

První informace je "Cílový balíček simulátoru":"com.example.simpush" , a říká, která aplikace se má spustit, v našem případě je to aplikace s ID balíčku com.example.simpush . Následuje " aps " a jak můžete vidět, má sekci upozornění, kde definujete název , titulky a tělo oznámení. Také v „a ps ” můžete definovat nastavení zvuku a vibrací. V části „vlastní ” můžete definovat vlastní informace, které se odesílají s oznámením push.

V závislosti na nastavení push notifikace vaší aplikace, notification.apns soubor může být jiný. Jakmile však v Xcode nakonfigurujete, že vaše aplikace může přijímat oznámení push, a udělili jste oprávnění přijímat oznámení push, měli byste být schopni to zprovoznit.

3. Sdílejte obrazovku zařízení Android na ploše

Pravděpodobně budete muset sdílet obrazovku telefonu se svou plochou. Buď se nechcete celý den naklánět nad telefonem, nebo máte něco představit svému klientovi/kolegovi na videokonferenci. Existují některá řešení, jako je Vysor nebo Screen stream přes HTTP, ale kvalita obrazu není tak skvělá a během používání se mohou přehrávat nějaké reklamy. Existuje však aplikace s názvem scrcpy , který poskytuje zobrazení a ovládání zařízení Android připojených přes USB (nebo přes TCP/IP, viz tip číslo 8). Nevyžaduje žádný root přístup a funguje na Linuxu, Windows a macOS. Používám ho už nějakou dobu a funguje skvěle. Také nastavení je velmi snadné. Zde se můžete naučit, jak jej nainstalovat a používat.

4. Vygenerujte ikony aplikací

Když máte aplikaci, která je připravena jít do obchodů, musíte mít ikonu aplikace. A máte jeden, protože váš návrhářský tým odvedl skvělou práci na jeho vytvoření! Musíte je ale mít v několika konkrétních rozměrech, s hranatými a zaoblenými rohy, pro iOS i Android. Abyste sebe i designéry ušetřili tohoto časově náročného a nudného úkolu, existuje několik webových aplikací, které to za vás mohou udělat, a nejlepší, kterou jsme v Lloyds digital dosud používali, je appiconmaker.co pro iOS a pro Android AndroidAssetStudio. Jsou zdarma a snadno se používají, bez vodoznaků nebo omezení.

5. Otevřete projekt Xcode z terminálu

Nejdelší způsob, jak otevřít projekt Xcode vaší aplikace, je otevření Finder> najděte složku projektu React Native> otevřít složku ios> otevřete .xcworkspace soubor . Nejkratší způsob je zadat "xc": "xed -b ios" ve vašich projektech package.json pod „scripts“ a stačí spustit yarn xc ze složky projektu k otevření projektu Xcode vaší aplikace React Native. Můžete se dozvědět více o xed v tomto středním příspěvku.

6. Použijte transform.tools

Transformace kódu nebo dat z jednoho formátu do druhého může být časově náročná a nudná, a pokud je struktura příliš matoucí a velká, může vám uniknout nějaká informace. Aby vám s tím pomohla, existuje online aplikace transform.tools, která nabízí mnoho druhů transformací. Zmíním jen některé z nich, většinou používané v React Native:

  • SVG to React Native (JSX)
  • JSON až JSDoc
  • JSON to Typescript
  • JSON na model MobX-State-Tree
  • GraphQL to Typescript

Navštivte transform.tools a snadno provádějte transformace svého kódu nebo dat.

7. Zvažte implementaci Code Push pro rychlejší zpětnou vazbu od vývojáře k testerům a klientům

Jak se časová osa projektu chýlí ke konci, komunikace a smyčka zpětné vazby mezi testery/klientem a vývojářem musí být co nejrychlejší. Pravděpodobně se dostanete do situace, kdy jste provedli testovací vydání aplikace s nějakou drobnou chybou, která aplikaci rozbije a testování nemůže pokračovat. A oprava chyby je velmi jednoduchá, jeden nebo dva řádky kódu JS. Abyste mohli dodat tuto pevnou verzi, musíte zvýšit počet sestavení, vytvořit nové vydání a nahrát ho do testovacího kanálu TestFlight nebo obchodu Google Play, což, jak se všichni shodneme, je minimálně 1 hodina práce. Pro zkrácení zpětné vazby můžete použít Code push. Code Push je cloudová služba od Microsoft Visual Studio App Center, která funguje jako centrální úložiště, kde mohou vývojáři publikovat určité aktualizace. Tyto aktualizace jsou pak dotazovány aplikacemi pomocí klientské sady Code Push SDK. Vzhledem k tomu, že Code Push částečně porušuje pokyny pro obchody Google a Apple, nebudu vás vyzývat, abyste jej implementovali do produkční verze aplikace, ale pro účely testování a vývoje vám to může velmi pomoci. Popsal jsem Code Push v článku Implementace Code Push v aplikacích React Native. V článku najdete další informace o tom, co je Code Push a jak jej implementovat.

8. ADB přes WiFi

Váš počítač komunikuje s vaším zařízením Android pomocí Android Debug Bridge (adb ). Možná si pamatujete adb z výukového programu spuštěného na zařízení a ve výukovém programu budete vedeni k použití USB, aby vše fungovalo. Existuje však možnost mít adb přes WiFi! Zde je návod, jak nastavit adb přes WiFi:

  • Ujistěte se, že vaše zařízení Android a adb hostitelské počítače jsou připojeny ke společné Wi-Fi síti přístupné oběma
  • Připojte zařízení k hostitelskému počítači pomocí kabelu USB
  • Nastavte cílové zařízení tak, aby naslouchalo připojení TCP/IP na portu 5555 spuštěním adb tcpip 5555 ve vašem terminálu
  • Odpojte kabel USB od zařízení
  • Zjistěte IP adresu svého zařízení Android. Adresu IP obvykle najdete v Nastavení> O telefonu> Stav> IP adresa
  • Připojte se k zařízení pomocí jeho IP adresy pomocí adb connect <<device_ip_address>>:5555
  • Spuštěním adb devices potvrďte, že je váš hostitelský počítač připojen k cílovému zařízení

Od této chvíle můžete na svém zařízení Android dělat vše, jako byste byli připojeni přes USB, například spustit adb reverse tcp:8081 tcp:8081 nebo použijte scrcpy z tipu č. 3 v tomto článku!

Zařízení Android se systémem Android 11+ mají metodu, jak bezdrátově používat adb pomocí funkce bezdrátového ladění. Můžete se dozvědět zajímavosti o adb tady.

9. r – Příkaz terminálu (Mac)

Toto je trik, který lze široce použít. V podstatě když spustíte r ve vašem terminálu bude znovu proveden poslední příkaz, který jste provedli, stejně jako kdybyste stiskli klávesu nahoru a stisknuli enter. Ale trik je v tom, že má možnosti pro spuštění a ukončení příkazu, který bude spuštěn z vaší historie.

První možnost, -4 ze snímku obrazovky, je začátek a spustí čtvrtý příkaz z historie terminálu a druhá možnost -2 je konec a spustí každý příkaz mezi čtvrtým a druhým v historii terminálu. Může se vám hodit, pokud máte stejnou sadu příkazů, které potřebujete spustit vícekrát, jako je spuštění nějakého testovacího skriptu nebo například odeslání opravy do git.
Pokud jste jednou spustili git add -Av , git commit -m "small fix" a git push , můžete je všechny znovu spustit spuštěním r -3 -1 ve vašem terminálu.

Lloyds je k dispozici pro partnerství a otevřena novým projektům. Pokud se o nás chcete dozvědět více, klikněte zde.
Nezapomeňte nás také sledovat na Instagramu a Facebooku!