Upozornění: Nejsem si jistý, zda je to nejlepší přístup k úkolu. Pokud to chcete vyzkoušet, ujistěte se, že používáte ovládání zdroje

Jak přejmenovat Nativní aplikaci React

Přejmenování projektu React Native je něco, co budete muset zřídka dělat, pokud vůbec. Musel jsem to udělat v minulosti a trochu jsem bojoval. Nemám moc / žádné zkušenosti s nativním vývojem, takže jsem se cítil ze svého živlu, když jsem se tam snažil pracovat.

Naštěstí přejmenování projektu React Native se pro nás z nás stalo mnohem jednodušší bez nativního zážitku. Nejsem si jistý, zda to bylo možné jako nutnost aplikace create-reagovat-native-app nebo zda ji CRNA jednoduše používá, ale nyní existuje (od verze v0.41) soubor app.json a rea-native příkaz k vysunutí. Díky těmto nástrojům je vytváření aplikace React Native neuvěřitelně snadné, ale pro ty, kteří již mají aplikace React Native, je můžeme stále využívat při přejmenování aplikace.

tl; dr

  • Zkopírujte své ikony z iOS a Android
  • Aktualizujte displayName v app.json na nové jméno
  • Odstraňte adresáře ios / a android /
  • Spusťte reakčně-nativní vysunutí
  • Vyměňte ikony, které jste zkopírovali dříve
  • Spustit odkaz nativní reakce
  • Spusťte aplikaci a doufejte, že to fungovalo! Nebo si přečtěte zbytek tohoto tutoriálu.

Preferujete video?

Založit

Jako ukázku pro tento tutoriál budu používat dokončený projekt z mého kurzu Create Your First React Native App. Je to základní aplikace React Native se strašným názvem, YFRNAppSource. Jedná se o aplikaci pro správu kontaktů, takže ji přejmenujeme na Správce kontaktů.

Je třeba poznamenat, že tato aplikace má nativní závislosti v důsledku reakčních-nativních-vektorových ikon. Má také ikony pro domovskou obrazovku. Primární věc, kterou budeme aktualizovat, je zobrazovaný název používaný na domovské obrazovce aplikace a udržování nativních závislostí a ikon. Zde vypadá, jak naše aplikace na obrazovce vypadá.

Příprava

Možná existuje lepší způsob, jak toho dosáhnout, ale to je to, co jsem zjistil, že pro mě pracoval. S vědomím, že mám pro svou aplikaci nastaveny ikony, které žijí v adresáři ios / a android /, budu si je kopírovat, protože tyto adresáře budou úplně přepsány.

Pro iOS zkopírujeme Images.xcassets, které najdete na ios / YFRNAppSource /. Pro moji aplikaci je vše, co potřebuji - pokud jste přidali další díla (například úvodní obrazovky), možná budete muset také získat jejich kopie.

Pro Android zkopírujeme soubory mipmap- *, ​​které najdete na Android / app / src / main / res /. Pro moji aplikaci je vše, co potřebuji - pokud jste přidali další díla (například úvodní obrazovky), možná budete muset také získat jejich kopie.

Pokud jste na této aplikaci pracovali dlouhou dobu a provedli jste mnoho aktualizací adresářů pro Android a ios, zkontrolujte vše, co jste přidali, a zkopírujte příslušné soubory / adresáře.

Změna názvu

Chcete-li změnit název aplikace, budete chtít otevřít soubor app.json v kořenovém adresáři vašeho projektu. Moje vypadá takto

{
  "name": "YFRNAppSource",
  "displayName": "YFRNAppSource"
}

Chcete-li jednoduše změnit jméno zobrazené na domovské obrazovce uživateli, je pravděpodobně nutné změnit vlastnost displayName. To je vše, co budu dělat - tímto způsobem, když se podíváme na náš git diff po upgradu, ne všechno uvnitř adresáře ios / a Android / se nezmění, což usnadní sledování.

Změnu provedu aktualizací displayName.

{
  "name": "YFRNAppSource",
  "displayName": "Správce kontaktů"
}

Nyní odstraním adresáře ios / a android / z mého projektu.

S těmi, kdo jsou pryč, mohu spustit reakčně-nativní vysunutí, které znovu vytvoří soubory - uvidíte výstup podobný tomuto ve vaší konzoli.

➜ YFRNAppSource git: (master) reaject-native eject
Skenování 644 složek, zda neobsahují odkazy v adresáři / Users / spencer / dev / YFRNAppSource / node_modules (4ms)
Generování složky iOS.
Generování složky Android.

Pokud nyní spustíte stav git, uvidíte, že se hodně změnilo. Velká část toho je z našich ikon odstraněna. Zkopírujte a vložte ty adresáře, které jste zkopírovali dříve, na jejich vhodná místa.

Pokud v tomto okamžiku spustíte stav git, dojde k mnohem menším změnám. V mém případě je další největší příčinou změn důsledek toho, že už nejsou propojeny ikony reagující na nativní vektor.

Naštěstí můžeme tento problém vyřešit pomocí odkazu na nativní reakci, takže pomocí tohoto příkazu propojíme nativní závislosti. Pokud máte nativní závislosti, musíte je nastavit ručně (což znamená, že nepracují s reaktivním nativním odkazem), budete to také chtít udělat hned teď.

Při spuštění stavu git mi to přináší mnohem menší sadu změn.

upraveno: android / app / src / main / res / value / strings.xml
změněno: app.json
změněno: ios / YFRNAppSource.xcodeproj / project.pbxproj
změněno: ios / YFRNAppSource / Info.plist

Změny v řetězcích strings.xml a app.json jsou jednoduše změny názvu. Vyjádření rozdílu git to jasně objasňuje.

Rozdíl v souboru project.pbxproj se může zdát zastrašující, ale ve skutečnosti se nic nezměnilo s výjimkou řetězce, který předponuje každý řádek. Není tu nic, co musíme udělat.

Poslední soubor je Info.plist, který je pro mě přesně takový, jak ho potřebuji. Váš projekt se může lišit - možná jste požádali o určitá oprávnění nebo jiné věci. Chcete to všechno zkontrolovat a ujistit se, že jsou věci nastaveny tak, jak potřebujete.

Testování to

Nejprve se ujistěte, že zabijete balíček React Native. Pak můžete pokračovat a spouštět aplikaci, jak to obvykle děláte (pro mě to bude prostřednictvím reaktivních run-ios a reaktivních run-androidů).

Nyní můžete vidět, že aplikace má nový název a ikona zůstává stejná.

Na závěr

U něčeho tak jednoduchého je to spousta kroků a většinou běží několik příkazů a pak se ujistěte, že během procesu nic nepřerušíte. Pokud víte, co změnit na nativní straně, může to být pro vás lepší volbou, protože se dotkne méně kódu. Pokud se chystáte změnit název aplikace, doporučujeme vám to udělat co nejdříve, abyste snížili bolest hlavy.

Doufám, že se vám to líbilo, a pokud máte zájem dozvědět se více tipů a triků o registraci do React Native, zaregistrujte se do mého seznamu e-mailů!