Ändern Sie den App-Namen in React Native

84

Ich versuche herauszufinden, wie man einen ReactNative-App-Namen ändert. Die auf meinem Gerät installierte APK ist einfach "App" mit dem Android-Symbol. Wie kann ich das ändern?

Ich habe versucht, package.json zu ändern und das reaktionsnative Upgrade erneut auszuführen, aber AndroidManifest.xml wurde nicht aktualisiert

Überladung119
quelle

Antworten:

132

Der Generator überschreibt die strings.xmlDatei in nicht android/app/src/main/res/values/, daher müssen Sie die app_nameVariable manuell ändern

gestorben
quelle
Stellen Sie außerdem sicher, dass getMainComponentName () in Ihrer MainActivity den Namen Ihrer reaktiven nativen App zurückgibt. dh Name in app.json
John Muraguri
5
Was ist mit IOS?
Abd Rmdn
1
React
RT_
Was ist mit iOS?
Muhammad Ashfaq
4
Um den Anzeigenamen der reaktionsnativen IOS-App zu ändern, können Sie die Eigenschaft 'Bundle-Anzeigename' in info.plist
Hassan Raza
61

Versuchen Sie , dieses npm-Paket mit React -Native-Rename umzubenennen , um den Vorgang zu vereinfachen

// in project directory

   npx react-native-rename <newName>
Paul Nyondo
quelle
6
Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen. Nur-Link-Antworten können ungültig werden, wenn sich die verknüpfte Seite ändert. - Aus Review
m_callens
1
Problem angesprochen
Paul Nyondo
2
@ MikeS. Dies ist keine schlechte Praxis, da es sich NICHT um eine Projektabhängigkeit handelt, sondern um ein Werkzeug, und es ist in der Tat eine schlechte Praxis, sie als Projektabhängigkeiten zu haben. Ist wie CRNA, sollten Sie es als globales Tool haben
Gustavo Topete
16
WARNUNG: Verwenden Sie diese Bibliothek nicht. es wird dein Projekt ruinieren. Verwenden Sie dies niemals.
MRSafari
20
VERWENDE NICHT. Zum jetzigen Zeitpunkt ist dieses Paket veraltet / nicht gewartet und macht Ihr Projekt unbrauchbar.
SQueryL
37

Für Android

Ändern display in app.json Datei

Ändern app_name in android / app / src / main / res / Werte / strings.xml

Führen Sie dann diese Befehle nacheinander aus

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

Für iOS

Ändern Anzeigename in Projektziel (Registerkarte Allgemein)

Wählen Sie Ihr Anwendungsprojekt als Hostanwendung im Projektziel zum Testen aus (Registerkarte Allgemein).Geben Sie hier die Bildbeschreibung ein

Chhay Rith Hy
quelle
2
Vielen Dank, das hat bei mir funktioniert, nachdem ich so viele andere Lösungen
ausprobiert habe
Sie, mein Herr, ist ein Lebensretter
Jithin
28

Die Art und Weise, wie ich das für Android gemacht habe (hacky, aber es funktioniert), hat nur das String-Feld app_name in geändert

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

Der Name Ihrer installierten Android-App wird in den Wert geändert, den Sie als Wert angegeben haben.

Steve Phuc
quelle
1
Ich habe diese Methode ausprobiert, aber sie hat mein Problem nicht gelöst. Wenn die App auf meinem Handy ausgeführt wird, wird mit dem Fehler "Anwendung <vorheriger App-Name> wurde nicht registriert"
angezeigt
1
Versuchte @KlaasNotFound Methode. Erfolgreich Neubau
NIKHIL CM
Ich habe das gleiche Problem wie @NIKHILCM mit reaktionsnativen 0,56
Marecky
15

Ich finde, wenn Sie sowohl den App-Namen als auch den Paketnamen ändern möchten (dh die gesamte App umbenennen), sind die folgenden Schritte erforderlich:

  • Stellen Sie sicher, dass Sie in den Unterordnern android/und nichts Wertvolles (nicht generierte, manuell kopierte Ressourcen) haben ios/.

  • Löschen sowohl die android/und ios/Ordner.

  • Ändern Sie den "name"Eintrag in Ihrem package.jsonin den neuen Namen.

  • Ändern Sie den App-Namen in Ihrem index.android.jsund index.ios.js: AppRegistry.registerComponent('NewAppName', () => App);

  • Ausführen react-native upgrade, um die Plattform-Unterordner neu zu generieren.

  • Wenn Sie verknüpfte Ressourcen (wie benutzerdefinierte Schriftarten usw.) ausgeführt haben react-native link.

  • Wenn Sie andere generierte Ressourcen (wie App-Symbole) haben, führen Sie die Skripte aus, um sie zu generieren (z yo. B. ).

  • Deinstallieren Sie abschließend die alte App auf jedem Gerät und führen Sie die neue aus.

KlaasNotFound
quelle
7
Nur eine Anmerkung: Ich denke, Schritt 1 sollte sein create a repo test branch first.
Mike S.
1
Ab heute gibt es ein neues npm-Paket, das diese Probleme minimieren soll react-native-git-upgrade. Aber ich kann es nicht zum Laufen bringen yarn. Mein Projekt wird nicht verwendet npmund ich möchte es auch nicht global installieren. Also versuche ich meine Optionen herauszufinden. Bisher react-native-git-upgradescheitert von CLI
Mike S.
1
Vielen Dank für Ihre Schritte Ich folgte einigen und es hat funktioniert
Greco Jonathan
1
Müssen
Steffo Dimfelt
1
react-native upgradegeneriert keine Plattform-Unterordner mehr.
Dogu Deniz Ugur
11

Wenn Sie nicht irgend etwas in Ihrem Android - Ordner wertvoll haben, können Sie den Ordner dann ausführen löschen react-native upgradedann react-native android. Diese erstellen AndroidManifest.xml zusammen mit den erforderlichen Dateien und Ordnern neu. (Versucht auf 0.18 in Windows 10)

Grün
quelle
Funktioniert auch unter macOS Sierra.
Prashant Ghimire
11

Zunächst einmal: Öffnen Sie die app.jsonDatei in Ihrem reaktionsnativen Projektverzeichnis. Ersetzen Sie einfach displayNameden Wert der json-Eigenschaft in dieser Datei. z.B:

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

Für Android-App:strings.xml Datei öffnen , ersetzen Sie den <string name="app_name">Wert des Tags durch Ihren neuen App-Namen. z.B:

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

Für iOS: Öffnen info.plist, ersetzen Sie den Wert nach <key>CFBundleDisplayName</key>durch Ihren App-Namen. z.B:

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

Deinstallieren Sie Ihre zuvor auf Ihrem Gerät installierte App. Verwenden Sie npm install im Projekthauptverzeichnis, und führen Sie im ios-Ordnerverzeichnis pod install- Befehle aus. Installieren Sie jetzt einfach die App auf Ihrem Gerät.

Rahul Rastogi
quelle
Wenn ich die Bundle-ID ändern möchte?
Oliver D
@OliverD Ändern Sie für Android die Anwendungs-ID in der Datei android / app / build.gradle und für iOS die Bundle-ID im iOS-Projekt. Vergessen Sie nicht, Ihre Drittanbieter-Konten im Falle einer Google-Anmeldung, einer Facebook-Anmeldung usw. neu zu konfigurieren.
Rahul Rastogi
10

Wenn Sie nur nach Android fragen, finden Sie hier eine Lösung

displayNameIn /app.jsonDatei ändern

Ändern app_nameinandroid/app/src/main/res/values/strings.xml

Führen Sie dann diese Befehle nacheinander aus

cd android
gradlew clean
cd ..
react-native run-android
Muhammad SaLman
quelle
Wie kommt es, dass ich reaktionsnatives Auswerfen nicht ausführen kann und es besagt, dass ich nameim definiert werden muss, app.jsonaber ich habe es?
Mr-Programme
Dies führt zu einem Fehler: Invariante Vilation: xxxAPP wurde nicht registriert. (xxxAPP war der ältere App-Name)
tess hsu
7

für android android / app / src / main / res / values ​​/ strings.xml Meine Android App

für ios Öffnen Sie es einfach in xCode. Wählen Sie die Registerkarte Projekt. Allgemein. Benennen Sie es einfach um.

Biswajit
quelle
3

einfach ändern <string name="app_name"> 'NEW_APP_NAME' </string> sich in

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

HINWEIS: empfohlen

React-Native-Rename

von Paul Nyondo kann die Datei MainApplication.java beeinflussen. VERWENDEN SIE SIE NICHT!

saeed eivazi
quelle
Einverstanden, ich hatte nicht alle React-Native-Umbenennung und es macht ein weiteres Problem in APP
Tess Hsu
2

Sie können dies versuchen

  1. Aktualisieren Sie displayName in app.json auf den neuen Namen
  2. Löschen Sie die Verzeichnisse ios / und android /
  3. Führen Sie den reaktionsnativen Auswurf aus
  4. Führen Sie den reaktionsnativen Link aus
Sarath Ak
quelle
2
Auswerfen scheint nicht zu funktionieren, wenn über React 0.6 oben, daher zeigt der Befehl Fehler anzeigen: Fehler Nicht erkannter Befehl "Auswerfen".
Tess Hsu
2

Bevor Sie den App-Namen ändern, rufen Sie das Backup Ihres Codes ab. Gehen Sie dann zum folgenden Pfad und ersetzen Sie Ihren App-Namen durch den neuen App-Namen. Ändern Sie eine weitere Datei 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
quelle
2

Einfach so

PROJEKT> Android> App> Haupt> Res> Stil

Ändern Sie dann den App-Namen

Chaurasia
quelle
1

Erstellen Sie zunächst eine vollständige Sicherung des Projekts einschließlich der Knotenmodule (um in Zukunft Symbole / Fotos usw. wiederherzustellen).

  1. Aktualisieren Sie den Namen und den Anzeigenamen in app.json auf den neuen Namen
  2. Benennen Sie den App-Ordner genauso um wie den App-Namen
  3. Löschen Sie die Verzeichnisse ios / und android /
  4. ndoe Module löschen
  5. Aktualisiere den Namen in package.json (du musst einen neuen Namen für import & require () in deinem Code verwenden. Beispiel: import {x} from 'NewAppName / src / api')
  6. Wächter Watch-del-All
  7. rm -rf / tmp / haste-map-react-native-packager- *
  8. rm -rf / tmp / metro-bundler-cache- *
  9. PC neu starten
  10. sudo npm installieren
  11. reaktionsnatives Auswerfen
  12. Symbole / Bilder wiederherstellen
  13. reaktionsnativer Link
  14. PC neu starten
  15. App ausführen Vorsicht: Möglicherweise müssen Sie die Dinge manuell einrichten. in meinem Fall SplashScreen
Hussain Abu Alamal
quelle
sehr kompliziert, nicht einfach
Arif Hidayat