从模板创建 React Native 项目时如何设置显示名称? [英] How to set the Display Name when creating a React Native project from a template?

问题描述

根据文档的方式创建一个来自默认模板的 React Native 项目如下:

According to the documentation the way to create a React Native project from the default template is as follows:

npx react-native init NewcoFrameDesign

这将在项目中的多个位置将 NewcoFrameDesign 设置为应用程序名称，包括 app.json 作为 name 和 displayName，用作 iOS 和 Android 项目中应用命名的基础.

This will set NewcoFrameDesign as the app name in several places in the project including app.json as name and displayName, which is used as the basis for app naming inside the iOS and Android projects.

我希望我的显示名称为Newco Frame Design"；(带有空格)在所有相关位置，因为这用于例如 android/app/src/main/res/values/strings.xml 以及 ios/NewcoFrameDesign/Info.plist 从而可能显示给用户.在 react-native init 中使用带空格的名称不是一种选择，因为它会导致错误.

I want my Display Name to be "Newco Frame Design" (with the spaces) in all relevant locations, as this is used for example in android/app/src/main/res/values/strings.xml as well as ios/NewcoFrameDesign/Info.plist and thereby possibly shown to the user. Using a name with spaces with react-native init is not an option, as it will lead to errors.

必须在多个位置重命名显示名称.模板应该不是必需的.

Having to rename the Display Name in several places after creating the project from a template should not be necessary.

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

Therefore, what is the correct way to create a React Native project from a template with a name such as NewcoFrameDesign and a different displayName such as Newco Frame Design?

推荐答案

我在学习如何制作 我自己的示例模板.

TL;DR 答案是:

npx react-native init NewcoFrameDesign --titleNewco Frame Design"

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

Unexpectedly --title corresponds to displayName in app.json:

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

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

This should have been very easy to find, but the terminology used by React Native is not consistent, so I missed it at first when checking: 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

自定义应用标题"的使用官方文档中没有解释，谷歌搜索也不会产生有用的结果.甚至 react-native-community/cli源代码令人困惑，因为placeholderName、placeholderTitle、projectTitle 和displayName 等术语的使用不明确分化.React Native 模板源代码 确实提供了线索:

The use of "a custom app title" is not explained in the official documentation and a Google search will not yield helpful results either. Even the react-native-community/cli source code is confusing as terms like placeholderName, placeholderTitle, projectTitle and displayNameare used with unclear differentiation. The React Native templating source code does provide a clue:

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

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

The official React Native templates update the displayName as specified by title in android/app/src/main/res/values/strings.xml as well as ios/NewcoFrameDesign/Info.plist and possibly other places. These determine the app name shown to the user.

每个模板都应在 template.config.js，但是 很多模板都做不到

Each template should properly specify the titlePlaceholder in template.config.js, but 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 项目.

Not specifying titlePlaceholder leads to the wrong displayName in app.json. It's a minor issue though as the displayName in app.json is only used by the eject command. Even if titlePlaceholder is missing in the template config, the react-native init --title option will still be properly applied to the ios and android projects.

这篇关于从模板创建 React Native 项目时如何设置显示名称?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！