React Native-Projekt umbenennen?


82

Gibt es Anweisungen, was geändert werden muss, um ein React Native-Projekt umzubenennen? Ich habe eine App namens MyAppIOS und möchte sie einfach in MyApp umbenennen (jetzt, da die Android-Unterstützung nicht mehr verfügbar ist).

Antworten:


65

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.


1
Die meisten sollten dies aufgreifen, aber nur zu Ihrer Information, diese Antwort ist NUR für ANDROID .
Kapellensaft

84

Sie können das Namensattribut in ändern package.json, ausführen react-native upgradeund einfach die Android / iOS-Dateien überschreiben lassen. Überschreiben Sie Ihre Indexdateien jedoch nicht, wenn nicht gespeicherter Code vorhanden ist.

Ändern Sie dann Ihre Appregistry-Zeile von

AppRegistry.registerComponent('MyAppIOS', () => MyAppIOS);

Zu:

AppRegistry.registerComponent('MyApp', () => MyApp);

1
Ich musste auch die Hauptklasse entsprechend umbenennen: Klasse MyApp erweitert Component {.... etc.
Per Quested Aronsson

4
Dadurch werden die alten MyAppIOS-Dateien nicht gelöscht, daher sollten Sie auch Folgendes tun: $ rm -rf android/app/src/main/java/com/myappios && rm -rf ios/MyAppIOS*
Neil Sarkar

6
Ich denke, das react-native upgradewird auch Ihr React-Native aktualisieren. Seien Sie vorsichtig, da dies Ihre Abhängigkeiten beschädigen könnte.
Herlon Aguiar

Wir haben eine Reihe zusätzlicher Schritte im Internet gefunden - eine vollständige Liste (und die Annahme von Pull-Anfragen!) Unter: github.com/2MR/renaming-a-react-native-project
Freewalker

42

Was für mich einfach mehrmals funktioniert, erfahren Sie weiter unten.

  • Kopieren Sie zuerst das Verzeichnis, in dem Ihre zu ändernde Anwendung vorhanden ist. Und gehen Sie zu Ihrem neu geklonten Verzeichnis.
  • Ändern Sie den Namen in der index.ios/android.jsDatei, die als Parameter angegeben wird, in AppRegistry.
  • Ändern Sie den Namen und die Version entsprechend auf package.json
  • Löschen /iosund /androidOrdner, die von Ihrer älteren App verbleiben, sowie die app.jsonDatei, falls vorhanden.
  • laufen $react-native upgradezu erzeugen /iosund /androidwieder Ordner.
  • $react-native linkfür jede externe Abhängigkeit ausführen .
  • endlich rennen $react-native run-iosoder was du willst.

1
Neuere Versionen von React Native haben Sie auch die Werte in app.json geändert, wenn ich mich richtig erinnere.
Christopher Bradshaw

4
Ja, es scheint, dass React-Native nach 0.41 eine offizielle Möglichkeit bietet, native Ordner /iosund neu zu generieren /android. Für mehr könnte man überprüfenreact-native eject
Milkersarac


27

Für iOS ist auch die Möglichkeit verfügbar, die xcodeproj-Einstellungen zu ändern.

Zeigen Sie <Ihren App-Namen> -> Info.plist an und fügen Sie den Bundle-Anzeigenamen hinzu .

Ändern des iOS-App-Namens:

Geben Sie hier die Bildbeschreibung ein



8
  1. Aktualisieren Sie displayName in app.json auf den neuen Namen
  2. Löschen Sie die Verzeichnisse ios / und android / im Root-Projekt
  3. In der Befehlszeile Ausführen:

    react-native eject
    react-native link 
    

7

Vielleicht möchten Sie auch das npm-Paket auschecken ( react-native-rename ):

Verwendung:

React-Native-Rename <Name>

Es funktioniert gut für mein Projekt.


In meiner App löscht dieser Befehl meine Java-Dateien unter android / app / src / main / java / com / appname!
Johncy

WARNUNG: Verwenden Sie diese Bibliothek nicht. es wird dein Projekt ruinieren. Verwenden Sie dies niemals.
MRSafari

6

Sie können das react-native-renamenpm-Paket verwenden.

npm install react-native-rename
react-native-rename [newName]

https://www.npmjs.com/package/react-native-rename


1
Ein Link zu einer Lösung ist willkommen, aber stellen Sie sicher, dass Ihre Antwort ohne sie nützlich ist: Fügen Sie dem Link einen Kontext hinzu, damit Ihre Mitbenutzer eine Vorstellung davon haben, was es ist und warum es dort ist, und zitieren Sie dann den relevantesten Teil der Seite, die Sie verwenden. erneutes Verknüpfen mit, falls die Zielseite nicht verfügbar ist. Antworten, die kaum mehr als ein Link sind, können gelöscht werden.
Filnor

Außerdem sollten Sie Ihre Antworten nur auf Englisch schreiben, da dies eine Website nur auf Englisch ist. Für Portugiesisch gehen Sie bitte zu pt.stackoverflow.com
Filnor

2
WARNUNG: Verwenden Sie diese Bibliothek nicht. es wird dein Projekt ruinieren. Verwenden Sie dies niemals.
MRSafari

@ MRSafari -1, funktionierte gut für mich bei einem ausgeworfenen (Nicht-Expo) Projekt
Chris Sherriff

@MRSafari Deshalb gibt es Git?
iRohitBhatia


5
  1. Für die IOS-App ist auch eine Änderung der xcodeproj-Einstellungen verfügbar.

Öffnen Sie die Info.plistDatei aus Ihrem Projektverzeichnis directory/ios/{appname}und ändern Sie den Anzeigenamen des Bundles.

<key>CFBundleDisplayName</key>
<string>NEW APP NAME</string>
  1. Für die Android App können Sie im Android-Ordner Ihres Projektverzeichnisses wechseln.

    cd android/app/src/main/res/values/

Öffnen Sie die strings.xmlDatei und ändern Sie den Namen Ihrer App in

 <string name="app_name">NEW APP NAME</string>

4

Wie hier erwähnt ( https://github.com/facebook/react-native/issues/4227 ), müssen Sie keinen Bundle display nameSchlüssel hinzufügen , wie von @janus_wel angegeben.

Sie können einfach Bundle namevon $(PRODUCT_NAME)auf aktualisieren My App.


Dies ist die einzige Lösung, die für mich funktioniert hat. Ich habe eine Build - Einstellung CUSTOM_DISPLAY_NAME (zur Unterstützung der verschiedenen App - Namen für Debug- und Release) genannt wird , dann einfach aktualisiert Bundle namewerden$(CUSTOM_DISPLAY_NAME)
Kevin Cooper

1
  • Kopieren Sie zunächst die Adresse, unter der Ihre Anwendung, deren Name geändert werden soll, vorhanden ist. Und gehen Sie zu Ihrem neu geklonten Verzeichnis.

  • Ersetzen Sie den Namen in der Datei index.ios / android.js, die AppRegistry als Parameter zugewiesen wird.

  • Aktualisieren Sie den Namen und die Version entsprechend auf package.json. Entfernen Sie die Ordner / ios und / android, die von Ihrer älteren App und von der

  • Führen Sie ein Upgrade von $ react-native aus, um erneut Ordner / ios und / android zu generieren. Führen Sie für eine externe Abhängigkeit den Link $ react-native aus.

  • Führen Sie schließlich $ react-native run-ios oder sonst aus.


1

Für den Fall, dass keine der Lösungen für Sie funktioniert hat oder dass das Ausprobieren einer App Ihre App beschädigt hat. Das geht zu den Grundlagen.

  1. Initiieren Sie ein neues reaktionsnatives Projekt mit dem Namen, in den Sie Ihre App ändern möchten.
  2. Kopieren Sie die Abhängigkeitsliste aus Ihrem vorherigen Projekt in die neue package.json
  3. Kopieren Sie alte Projektdateien und achten Sie auf die gleiche Struktur.
  4. Lauf npm install
  5. Lauf react-native run-android

Dies sollte Sie wieder auf den richtigen Weg bringen


0

Die Lösung, die für mich funktioniert hat, besteht darin, zuerst den Namen des Ordners Ihres reaktionsnativen Projekts zu ändern

npm install react-native-rename

react-native-rename newName

Für mich geht das


0

Benennen Sie die React-Native-App mit nur einem Befehl um: React-Native-Rename

Installation

yarn global add react-native-rename oder npm install react-native-rename -g

Verwenden Sie den folgenden Befehl im Projektverzeichnis.

react-native-rename <newName>

Beispiel:

react-native-rename "Travel App"


0

Die folgenden Schritte müssen ausgeführt werden, während Project / App in React Native 1 umbenannt wird. Erstellen Sie einen neuen Ordnertest

  1. Kopieren Sie alle Dateien von der Demo und fügen Sie sie in den Testordner ein

  2. Ändern Sie den Namen in der Datei package.json

  3. Ändern Sie den Namen in der Datei package-lock.json

  4. Ändern Sie den Namen in der Datei App.json

  5. Löschen Sie die Ordner / ios und / android

  6. Führen Sie den Befehl react-native eject aus, um die Ordner / ios und / android erneut zu erstellen

  7. Führen Sie den React-Native-Link für externe Abhängigkeiten aus.

  8. Führen Sie Ihre App schließlich mit dem reaktionsnativen Befehl run-android aus.

Weitere Informationen finden Sie unter https://youtu.be/_lgH9LXf818

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.