Zmień nazwę aplikacji w React Native

92

Próbuję dowiedzieć się, jak zmienić nazwę aplikacji ReactNative. Zainstalowany pakiet APK na moim urządzeniu to po prostu „Aplikacja” z ikoną Androida. Jak mogę to zmienić?

Próbowałem zmienić plik package.json i ponownie uruchomić aktualizację react-native, ale nie zaktualizowało to AndroidManifest.xml

Przeciążenie 119
źródło

Odpowiedzi:

139

Generator nie nadpisuje strings.xmlpliku znajdującego się w android/app/src/main/res/values/, więc musisz app_nameręcznie zmienić zmienną

dieu
źródło
Upewnij się również, że getMainComponentName () w Twojej MainActivity zwraca nazwę Twojej macierzystej aplikacji. tj. imię w app.json
John Muraguri
6
a co z IOS?
Abd Rmdn
2
React
rt_
A co z iOS?
Muhammad Ashfaq
7
aby zmienić natywną nazwę wyświetlaną aplikacji IOS, możesz zmienić właściwość „Nazwa wyświetlana pakietu” z info.plist
Hassan Raza,
63

Spróbuj reaktywować natywną zmianę nazwy tego pakietu npm ułatwi ten proces

This package assumes that you created your react-native project 
using react-native init.

Uwaga: ten pakiet nie próbuje poprawnie zmienić nazw artefaktów kompilacji, takich jak cele instalacji ios / build lub Cocoa Pod. Po zmianie nazwy projektu należy wyczyścić, skompilować i ponownie zainstalować zależności innych firm, aby działał poprawnie z nową nazwą.

// in project directory

   npx react-native-rename <newName>
Paul Nyondo
źródło
6
Chociaż ten link może odpowiedzieć na pytanie, lepiej jest zawrzeć tutaj zasadnicze części odpowiedzi i podać link do odniesienia. Odpowiedzi zawierające tylko łącze mogą stać się nieprawidłowe, jeśli połączona strona ulegnie zmianie. - Z recenzji
m_callens
1
problem rozwiązany
Paul Nyondo
2
@MikeS. nie jest to zła praktyka, ponieważ NIE jest to zależność projektu, ale narzędzie, a traktowanie ich jako zależności projektu jest rzeczywiście złą praktyką. Jest jak CRNA, powinieneś mieć to jako narzędzie globalne
Gustavo Topete
17
OSTRZEŻENIE: Nie używaj tej biblioteki. zrujnuje twój projekt. Nigdy tego nie używaj.
MRSafari
21
NIE UŻYWAĆ. W chwili pisania tego pakietu ten pakiet jest przestarzały / niekonserwowany i spowoduje, że Twój projekt będzie bezużyteczny.
SQueryL
44

Dla Android

Zmienić displayName w app.json pliku

Zmodyfikuj nazwę_aplikacji w android / app / src / main / res / values ​​/ strings.xml

następnie uruchom kolejno te polecenia

cd android
./gradlew clean
cd ..
react-native run-android

Na iOS

Zmień wyświetlaną nazwę w celu projektu (karta Ogólne)

Wybierz projekt aplikacji jako aplikację główną w celu testowania projektu (karta Ogólne)wprowadź opis obrazu tutaj

Chhay Rith Hy
źródło
2
Wielkie
1
Pan,
ratuje
28

Sposób, w jaki zrobiłem to dla Androida (hacky, ale działa), to po prostu zmiana pola app_name w ciągu

android / app / src / main / res / values ​​/ strings.xml

Zmieni nazwę zainstalowanej aplikacji na Androida na dowolną, którą podasz jako wartość.

Steve Phuc
źródło
1
Wypróbowałem tę metodę, ale nie rozwiązała ona mojego problemu. Kiedy aplikacja działa na moim telefonie komórkowym, wyświetla komunikat z błędem „Aplikacja <nazwa poprzedniej aplikacji> nie została zarejestrowana”
NIKHIL CM
1
Wypróbowana metoda @KlaasNotFound. Pomyślnie uruchomiono nową kompilację
NIKHIL CM
Mam taki sam problem jak @NIKHILCM z natywną
reakcją
15

Uważam, że jeśli chcesz zmienić zarówno nazwę aplikacji, jak i nazwę pakietu (tj. Zmienić nazwę całej aplikacji), konieczne są następujące kroki:

  • Upewnij się, że nie masz nic cennego (nie wygenerowanych, ręcznie skopiowanych zasobów) w android/iios/ podfolderach .

  • Usuń zarówno android/iios/ folder, .

  • Zmień "name"wpis w swoimpackage.json na nową nazwę.

  • Zmień nazwę aplikacji w pliku index.android.jsiindex.ios.js : AppRegistry.registerComponent('NewAppName', () => App);

  • Biegać react-native upgrade aby ponownie wygenerować podfoldery platformy.

  • Jeśli masz połączone zasoby (takie jak niestandardowe czcionki itp.), Uruchom react-native link .

  • Jeśli masz inne wygenerowane zasoby (takie jak ikony aplikacji), uruchom skrypty, aby je wygenerować (np yo .).

  • Na koniec odinstaluj starą aplikację na każdym urządzeniu i uruchom nową.

KlaasNotFound
źródło
7
Uwaga: myślę, że krok 1 powinien być create a repo test branch first.
Mike S.
1
Na dzień dzisiejszy, nowe opakowanie npm który twierdzi, aby zminimalizować te problemy react-native-git-upgrade. Ale nie mogę go uruchomić przy użyciu yarn. Mój projekt nie używa npmani nie chcę go instalować globalnie. Więc próbuję wymyślić moje opcje. Jak dotąd react-native-git-upgradenie udaje się z CLI
Mike S.
1
Wielkie dzięki za kroki, które wykonałem i zadziałało
Greco Jonathan
1
Musisz
1
react-native upgradenie generuje już podfolderów platformy.
Dogu Deniz Ugur
12

Przede wszystkim: otwórz app.jsonplik w katalogu swojego projektu macierzystego. I po prostu zamień displayNamewartość właściwości json w tym pliku. na przykład:

{
    "name": "SomethingSomething",
    "displayName": "My New App Name"
}

W przypadku aplikacji na Androida: otwórz strings.xmlplik, zamień wartość <string name="app_name">tagu na nazwę nowej aplikacji. na przykład:

<string name="app_name">My New App Name</string>

IOS: Otwórz info.plist, zamień wartość po <key>CFBundleDisplayName</key>nazwie aplikacji. na przykład:

<key>CFBundleDisplayName</key>
<string>My New App Name</string>

Odinstaluj poprzednią aplikację zainstalowaną na urządzeniu. Użyj polecenia npm install w głównym katalogu projektu, w katalogu ios uruchom polecenia pod install . Teraz po prostu zainstaluj aplikację na swoim urządzeniu.

Rahul Rastogi
źródło
Jeśli chcę zmienić identyfikator pakietu?
Oliver D
@OliverD W przypadku systemu Android zmień identyfikator aplikacji w pliku android / app / build.gradle, aw przypadku systemu iOS zmień identyfikator pakietu w projekcie systemu iOS. Nie zapomnij o ponownej konfiguracji kont innych firm w przypadku logowania się do Google, logowania na Facebooku itp.
Rahul Rastogi
11

Jeśli nie masz niczego cennego w android folderu, można usunąć folder, a następnie uruchomić react-native upgradewtedy react-native android. Spowoduje to odtworzenie pliku AndroidManifest.xml wraz z niezbędnymi plikami i folderami. (Próbowano w wersji 0.18 w systemie Windows 10)

Zielony
źródło
Działa również na macOS Sierra.
Prashant Ghimire,
10

Jeśli pytasz tylko o Androida, oto rozwiązanie

Zmień displayNamew /app.jsonpliku

Zmień app_namewandroid/app/src/main/res/values/strings.xml

następnie uruchom kolejno te polecenia

cd android
gradlew clean
cd ..
react-native run-android
Muhammad SaLman
źródło
dlaczego nie mogę uruchomić wyrzucania natywnego reagowania i mówi, że namemuszę być zdefiniowany w, app.jsonale mam to?
Mr-Programs
spowoduje to błąd: Niezmienna vilacja: xxxAPP nie została zarejestrowana. (xxxAPP to starsza nazwa aplikacji)
tess hsu
7

dla Androida android / app / src / main / res / values ​​/ strings.xml Moja aplikacja na Androida

dla ios Po prostu otwórz go w xCode wybierz kartę projektu, po prostu zmień jego nazwę.

Biswajit
źródło
3

po prostu zmień <string name="app_name"> 'NEW_APP_NAME' </string> lokalizację

[katalog_projektu] /android/app/src/main/res/values/strings.xml

UWAGA: zalecane

reakcja-natywna-zmiana nazwy

autorstwa Paula Nyondo może mieć wpływ na plik MainApplication.java, NIE UŻYWAJ GO!

saeed eivazi
źródło
Zgoda, nie wszystkie reagują na natywną zmianę nazwy i powoduje to inny problem w aplikacji
tess hsu
2

Możesz tego spróbować

  1. Zaktualizuj displayName w app.json do nowej nazwy
  2. Usuń katalogi ios / i android /
  3. Uruchom reakcję natywnego wyrzucania
  4. Uruchom łącze React-Native
Sarath Ak
źródło
2
eject wydaje się nie działać, jeśli przekroczono wartość React 0.6, więc polecenie show error: error Nierozpoznane polecenie "eject".
tess hsu
2

przed zmianą nazwy aplikacji pobierz kopię zapasową kodu, a następnie przejdź do następującej ścieżki i zamień nazwę aplikacji na nową nazwę aplikacji i zmień jeszcze jeden plik app.json E: *** \ android \ app \ src \ main \ res \ values ​​\ strings.xml

<resources>
    <string name="app_name">New Name</string>
</resources>

app.json

{
  "name": "oldName",
  "displayName": "New Name"
}
gauravsbagul
źródło
2

Po prostu sposób

PROJEKT> android> aplikacja> main> res> style

Następnie zmień nazwę aplikacji

Chaurasia
źródło
1

przede wszystkim utwórz całą kopię zapasową projektu wraz z modułami węzłów (w celu przywrócenia ikon / zdjęć itp. w przyszłości)

  1. Zaktualizuj nazwę i nazwę wyświetlaną w pliku app.json do nowej nazwy
  2. zmień nazwę folderu aplikacji na taką samą, jak nazwa aplikacji
  3. Usuń katalogi ios / i android /
  4. usuń moduły ndoe
  5. zaktualizuj nazwę w package.json (musisz użyć nowej nazwy do importu & require () w swoim kodzie, np .: import {x} z 'NewAppName / src / api')
  6. Watchman Watch-del-all
  7. rm -rf / tmp / haste-map-aware-native-packager- *
  8. rm -rf / tmp / metro-bundler-cache- *
  9. zrestartuj komputer
  10. sudo npm install
  11. reagować natywnym wyrzutem
  12. przywróć ikony / obrazy
  13. Reaguj natywny link
  14. zrestartuj komputer
  15. uruchom ostrożność z aplikacją : może być konieczne ręczne skonfigurowanie. w moim przypadku SplashScreen
Hussain Abu Alamal
źródło
bardzo skomplikowane, a nie proste
Arif Hidayat