从模板创建 React Native 项目时如何设置显示名称？答案

【问题标题】：How to set the Display Name when creating a React Native project from a template?从模板创建 React Native 项目时如何设置显示名称？
【发布时间】：2021-06-12 09:14:17
【问题描述】：

根据documentation从默认模板创建React Native项目的方式如下：

npx react-native init NewcoFrameDesign

这会将 NewcoFrameDesign 设置为项目中多个位置的应用名称，包括 app.json 和 name 和 displayName，用作 iOS 内部应用命名的基础，以及Android 项目。

我希望我的显示名称在所有相关位置都为“Newco Frame Design”（带有空格），例如在android/app/src/main/res/values/strings.xml 和ios/NewcoFrameDesign/Info.plist 中使用，因此可能会显示给用户。不能选择使用带有空格的名称 react-native init，因为这会导致错误。

从模板创建项目后，不必在多个位置rename the Display Name。

因此，从具有 name（例如 NewcoFrameDesign）和不同 displayName（例如 Newco Frame Design）的模板创建 React Native 项目的正确方法是什么？ em>？

【问题讨论】：

标签： android ios react-native rename

【解决方案1】：

我在学习如何制作my own sample template时遇到了答案。

TL;DR 答案是：

npx react-native init NewcoFrameDesign --title "Newco Frame Design"

没想到--title对应app.json中的displayName：

{
  "name": "NewcoFrameDesign",
  "displayName": "Newco Frame Design"
}

这个应该很容易找到，但是React Native使用的术语不一致，所以一开始查的时候漏掉了：npx react-native init --help：

Options:
  --version <string>    Shortcut for `--template react-native@version`
  --template <string>   Uses a custom template. Valid arguments are the ones supported by `yarn add [package]` or `npm install [package]`, if you are using `--npm` option
  --npm                 Forces using npm for initialization
  --directory <string>  Uses a custom directory instead of `<projectName>`.
  --title <string>      Uses a custom app title name for application
  --skip-install        Skips dependencies installation step
  -h, --help            output usage information

官方文档中没有解释“自定义应用标题”的使用，Google 搜索也不会产生有用的结果。甚至react-native-community/cli source code 也令人困惑，因为placeholderName、placeholderTitle、projectTitle 和displayName 等术语的使用区分不清。 React Native templating source code 确实提供了线索：

placeholderName: 'HelloWorld',
titlePlaceholder: 'Hello App Display Name'

官方 React Native 模板更新了 title 在 android/app/src/main/res/values/strings.xml 以及 ios/NewcoFrameDesign/Info.plist 和可能的其他地方指定的 displayName。这些决定了向用户显示的应用名称。

每个模板都应该在template.config.js中正确指定titlePlaceholder，但是many templates fail to do this

module.exports = {
  // Placeholder name that will be replaced in package.json, index.json, android/, ios/ for a project name.
  placeholderName: 'CustomReactNativeTemplate',

  // Placeholder title that will be replaced in values.xml and Info.plist with title provided by the user.
  titlePlaceholder: 'Custom React Native Template',
};

未指定 titlePlaceholder 会导致 app.json 中的 displayName 错误。这是一个小问题，因为 app.json 中的 displayName 仅由 eject 命令使用。即使模板配置中缺少 titlePlaceholder，react-native init --title 选项仍将正确应用于 ios 和 android 项目。

【讨论】：