在React Native中更改应用程序名称

Question

我正在尝试弄清如何更改ReactNative应用程序的名称。 我设备上安装的APK只是“App”，带有Android图标。 我该如何更改这个呢？

我尝试更改package.json并重新运行react-native upgrade，但它没有更新AndroidManifest.xml文件。

- Overload119

Answer 1

生成器不会覆盖位于android/app/src/main/res/values/目录下的strings.xml文件，因此您需要手动更改app_name变量。

- diedu

---

请确保你的MainActivity中的getMainComponentName()返回你的React Native应用程序名称，即app.json中的"name"。 - John Muraguri

iOS怎么样？ - Abd Rmdn

据称，react-native-rename 目前已经无人维护且无法使用。 - rt_

iOS怎么样？ - Muhammad Ashfaq

要更改 React Native iOS 应用程序的显示名称，您可以从 info.plist 中更改“Bundle display name”属性。 - Hassan Raza

谢谢@JohnMuraguri。这很有必要。MainActivity.java文件位于android\app\src\main\java\com[您的文件夹名称]中。 - trevorhpittman

Answer 2

针对 Android

在 app.json 文件中修改 displayName

在 android/app/src/main/res/values/strings.xml 中修改 app_name

然后逐个运行以下命令

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

iOS 版本：

在项目目标（通用选项卡）中修改显示名称。

在项目目标中选择您的应用程序项目作为主机应用程序进行测试（通用选项卡）。

- Chhay Rith Hy

---

在主机应用程序下拉菜单中没有显示我的“显示名称”。 - Zeeshan Ahmad Khalil

displayName is corresponding to key name in app.json - GuillaumeRZ

根据https://stackoverflow.com/a/68641035/9383288，您需要在`Info.plist`文件中使用` `代替空格。 - undefined

Answer 3

尝试使用react-native-rename这个npm包，它可以简化这个过程。

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

注意：该软件包不会尝试正确重命名构建工件，例如ios / build或Cocoa Pod安装目标。在重命名项目后，您应该清理、构建和重新安装第三方依赖项，以使其能够正确地使用新名称运行。

// in project directory

   npx react-native-rename <newName>

- Paul Nyondo

---

尽管该链接可能回答了问题，但最好在此处包含答案的关键部分并提供链接以供参考。仅有链接的答案如果链接页面发生更改，可能会变得无效。- 来自审核 - m_callens

问题已解决 - Paul Nyondo

@MikeS，这不是一个坏习惯，因为它不是项目依赖项，而是工具，将它们作为项目依赖项确实是一个坏习惯。就像CRNA一样，你应该将其作为全局工具。 - Gustavo Topete

警告：不要使用这个库。它会破坏你的项目。永远不要使用它。 - M.R.Safari

截至撰写本文，此软件包已被弃用/不再维护，使用它将导致您的项目无法使用。 - SQueryL

Answer 4

首先：打开你的React Native项目目录下的app.json文件。然后，只需替换该文件中displayName json属性的值即可。例如：

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

对于Android应用： 打开strings.xml文件，将<string name="app_name">标签的值替换为您的新应用名称。例如：

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

iOS: 打开 info.plist，将 <key>CFBundleDisplayName</key> 后面的值替换成你的应用名称。例如：

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

卸载您设备上以前安装的应用程序。在项目主目录中使用npm install，在ios文件夹目录中运行pod install命令。现在只需在您的设备上安装该应用程序即可。

- Rahul Rastogi

---

如果我想要更改 Bundle Identifier，该怎么做？ - Oliver D

@OliverD 对于Android，需要在android/app/build.gradle文件中更改应用程序ID，在iOS项目中更改Bundle标识符。不要忘记重新配置第三方帐户，例如Google登录、Facebook登录等。 - Rahul Rastogi

如果你想让一切都干净利落，你还需要打开Xcode并从那里重命名你的应用程序。 - Oussama Bouthouri

这修复了iOS应用程序名称，谢谢！但是启动画面仍然显示旧的应用程序名称。我该如何更新启动画面上的应用程序名称？ - Green

Answer 5

更新2021年

React Native版本: 0.64.0

Android

找到并打开以下文件，根据需要进行更改。
\android\app\src\main\res\values\strings.xml

<resources>
    <string name="app_name">My App</string>
</resources>

app.json

{
  "name": "MyApp",
  "displayName": "My App"
}

iOS

找到并打开\ios\YourAppName\Info.plist，根据需要进行更改。
注意: 如果您的名称包含空格，请使用 代替空格。

<key>CFBundleDisplayName</key>
<string>My&#x2007;App</string>

- Charitha Goonewardena

---

太棒了！谢谢！ - mick1996

你真是个救命稻草！找到这个关于空格的技巧花了好长时间！ - undefined

Answer 6

我在Android上的解决方法（有点不正规，但有效）是只需更改android/app/src/main/res/values/strings.xml中的字符串app_name字段。

这将更改您安装的Android应用程序的名称为您设置的值。

- Steve Phuc

---

我尝试了这种方法，但它没有解决我的问题。当我在我的手机上运行应用程序时，它显示一个错误信息：“应用程序<prev appname>尚未注册”。 - NIKHIL C M

尝试了@KlaasNotFound的方法。成功地使新版本运行起来。 - NIKHIL C M

我和@NIKHILCM一样，遇到了react-native 0.56的同样问题。 - Marecky

Answer 7

我发现，如果您想同时更改应用程序名称和包名称（即重命名整个应用程序），则需要执行以下步骤：

• 确保您的android/和ios/子文件夹中没有任何重要的内容（非生成的、手动复制的资源）。

• 删除android/和ios/文件夹。

• 将package.json中的"name"条目更改为新名称。

• 在index.android.js和index.ios.js中同时更改应用程序名称： AppRegistry.registerComponent('NewAppName', () => App);

• 运行react-native upgrade重新生成平台子文件夹。

• 如果您已链接资源（如自定义字体等），请运行react-native link。

• 如果您有其他生成的资源（如应用图标），请运行脚本生成它们（例如yo）。

• 最后，在每个设备上卸载旧应用程序并运行新应用程序。

- KlaasNotFound

---

注意：我认为第一步应该是“先创建一个测试分支的代码库。” - Mike S.

截至今天，有一个新的npm包声称可以减少这些问题，名为 react-native-git-upgrade。但我无法使用 yarn 运行它。我的项目不使用 npm，也不想全局安装它。因此，正在尝试找出我的选择。到目前为止，react-native-git-upgrade 在CLI中失败。 - Mike S.

非常感谢您的步骤，我按照一些步骤操作后成功了。 - Greco Jonathan

还需要创建一个调试密钥库。https://dev59.com/AVMI5IYBdhLWcg3wFnZB#57438549 - Steffo Dimfelt

react-native upgrade 现在不会再生成平台子文件夹了。 - Dogu Deniz Ugur

这个答案应该已经过时了，因为react-native upgrade不再创建子文件夹。我刚刚按照这些步骤操作，现在我没有这些文件夹了。 - mikasa

Answer 8

如果您只需要针对 Android 的解决方案，请执行以下操作：

在 /app.json 文件中修改 displayName。

在 android/app/src/main/res/values/strings.xml 中修改 app_name。

然后逐个运行以下命令。

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

- Salman Saleem

---

为什么我无法运行react-native eject，它说app.json中必须定义name，但我已经定义了，是怎么回事？ - Mr-Programs

这将导致错误：不变量违规：xxxAPP未注册。（xxxAPP是旧应用程序名称） - tess hsu

如果你正在使用Windows操作系统，则应该使用"./gradlew"来运行gradlew。 - Devorein

在安装新名称的应用程序之前，您应该卸载先前的应用程序。@tesshsu - Eduardo Cuomo

Answer 9

如果你的android文件夹中没有任何重要的东西，可以删除该文件夹，然后运行react-native upgrade以及react-native android。这将重新创建AndroidManifest.xml以及必要的文件和文件夹。(在Windows 10上尝试过0.18)

- Green

---

同样适用于macOS Sierra。 - Prashant Ghimire

Answer 10

对于 Android android/app/src/main/res/values/strings.xml 我的 Android 应用

对于 iOS 只需在 xCode 中打开它并选择项目标签，通常将其重命名即可。

- Biswajit