Внимание: Не съм сигурен, че това е най-добрият подход към задачата. Ако искате да опитате, уверете се, че използвате контрола на източника

Как да преименувате приложението React Native

Преименуването на вашия проект React Native е нещо, което рядко ще трябва да правите, ако изобщо някога. Трябваше да го правя в миналото и се борих доста. Нямам много / никакъв роден опит в развитието, така че се чувствах извън стихията си, когато се опитвах да работя там.

За щастие преименуването на проект React Native стана много по-лесно за тези от нас без роден опит. Не съм сигурен дали това е станало възможно като необходимост за създаване-реагиране-native-app или CRNA просто го използва, но сега има (тъй като v0.41 вярвам) файл на app.json и реагиращ нативен команда за изхвърляне. Тези инструменти направиха създаването на приложение React Native невероятно лесно, но за тези, които вече имат приложения React Native, все още можем да ги използваме при преименуването на приложението.

TL; р

  • Копирайте иконите си от iOS и Android
  • Актуализирайте displayName в app.json до новото име
  • Изтрийте ios / и android / директории
  • Изпълнете реактивния изтласкване
  • Заменете иконите, които сте копирали по-рано
  • Изпълнете връзката с реагираща връзка
  • Стартирайте приложението си и се надявайте да работи! Или прочетете останалата част от този урок.

Предпочитате видео?

Настройвам

Като демонстрация за този урок ще използвам завършения проект от курса си, Създайте своето първо React Native App. Това е основно приложение React Native с ужасно име, YFRNAppSource. Това е приложение за управление на контакти, така че ще го преименуваме на Contact Manager.

Нещо друго, което трябва да се отбележи, е, че това приложение има нативни зависимости поради икони за реакция-native-vector-icons. Има и икони за началния екран. Основното, което ще актуализираме, е името на дисплея, използвано на началния екран за приложението и поддържането на родните ни зависимости и икони. Ето как изглежда нашето приложение в момента на екрана.

подготовка

Може да има по-добър начин за това, но това е, което открих, че работи за мен. Като знам, че имам настроени икони за приложението ми, които живеят в директорията ios / android /, ще направя копие от тях, защото тези директории ще бъдат изцяло презаписани.

За iOS ще копираме Images.xcassets, които могат да бъдат намерени на ios / YFRNAppSource /. За моето приложение, което е всичко, от което се нуждая - ако добавите други активи (например екрани за пръскане), може да се наложи да получите и копие от тях.

За Android ще копираме файловете mipmap- *, ​​които могат да бъдат намерени в android / app / src / main / res /. За моето приложение, което е всичко, от което се нуждая - ако добавите други активи (например екрани за пръскане), може да се наложи да получите и копие от тях.

Ако работите над това приложение дълго време и сте направили много актуализации на директории за android и ios, не забравяйте да прегледате всичко, което сте добавили и копирайте подходящите файлове / директории.

Извършване на промяна на името

За да промените името на приложението, ще искате да отворите файла app.json в корена на вашия проект. Моят изглежда така

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

За да промените просто името, показано на потребителя на началния екран, всичко, което вероятно ще трябва да промените, е свойството displayName. Това е всичко, което ще направя - по този начин, когато проверяваме git разликата след ъпгрейд не всичко в директорията ios / android / ще се промени, което улеснява разглеждането.

За да направя промяната, ще актуализирам displayName.

{
  "name": "YFRNAppSource",
  "displayName": "Мениджър на контакти"
}

Сега ще изтрия директории ios / android / от моя проект.

С изчезналите мога да пусна реактивен изтласкване, което ще пресъздаде файловете - ще видите изход, подобен на този в конзолата.

➜ YFRNAppSource git: (master) реагиране-нативен изхвърляне
Сканиране на 644 папки за символни връзки в / Потребители / spencer / dev / YFRNAppSource / node_modules (4ms)
Генериране на папката на iOS.
Генериране на папката на Android.

Ако стартирате git статус в този момент, ще видите, че много неща са се променили. Голяма част от това е от нашите икони се изтриват. Копирайте и поставете тези директории, които сте копирали по-рано, на техните подходящи места.

Ако стартирате git статус в този момент, има много по-малко промени. В моя случай следващата най-голяма причина за промените е резултат от икони на реагиращи-нативни-вектори, които вече не са свързани.

За щастие, можем да използваме натисна връзка за реагиране, за да отстраним този проблем, така че ще използвам тази команда за свързване на родните зависимости. Ако имате местни зависимости, трябва ръчно да настроите (което означава, че те не работят с естествена връзка за реакция), ще искате да го направите и сега.

Това ме оставя с много по-малък набор от промени при изпълнение на git статус.

модифициран: android / app / src / main / res / values ​​/ strings.xml
модифициран: app.json
модифициран: ios / YFRNAppSource.xcodeproj / project.pbxproj
модифициран: ios / YFRNAppSource / Info.plist

Промените в strings.xml и app.json са просто промени в името, проверката на git diff прави това ясно.

Разликата с файла project.pbxproj може да изглежда смущаваща, но всъщност нищо не се е променило, освен низа, който префиксира всеки ред. Няма нищо, което трябва да направим тук.

Последният файл е Info.plist, който за мен е точно такъв, какъвто ми е необходим. Вашият проект може да е различен - може да сте поискали определени разрешения или други неща. Ще искате да проверите всичко това и да се уверите, че нещата са настроени според нуждите ви.

Тествайте го

Първо, уверете се, че убивате React Native. След това можете да продължите напред и да стартирате приложението, както обикновено правите (за мен това ще бъде чрез натискане на реактивни run-ios и react-native run-android).

Вече можете да видите, че приложението има ново име и иконата остава същата.

В заключение

За нещо толкова просто, това е много стъпки и то обикновено изпълнява шепа команди и след това се уверете, че не разбивате нищо в процеса. Ако знаете какво да промените от местната страна, тогава това може да е по-добрият избор за вас, тъй като ще докосне по-малко код. Ако ще промените името на приложението си, предлагам да го направите възможно най-рано, за да намалите всяко главоболие.

Надявам се да ви е харесало това и ако се интересувате да научите повече съвети и трикове за React Native, регистрирайте се за моя имейл списък!