NativeScript开发中如何让Android端ActionBar的标题文字居中

问题背景 #

在NativeScript开发中使用ActionBar自带title属性设置标题时，会出现以下问题：

• Android端标题默认左对齐，手动给ActionBar添加text-align: center样式不生效
• 仅iOS端会默认自动居中，多端样式表现不一致

原始实现代码如下：

<ActionBar class="text-center" [title]="title" (loaded)="onLoadedActionBar()"></ActionBar>

解决方法 #

放弃使用ActionBar标签的title属性，改为在ActionBar内部嵌套独立Label组件承载标题内容即可。

布局代码 #

<ActionBar (loaded)="onLoadedActionBar()">
  <Label class="title" [text]="title"></Label>
</ActionBar>

样式代码 #

.title {
  font-weight: bold;
  font-size: 17px;
}

该方案可实现多端统一的ActionBar标题居中效果，无样式兼容问题。

内容的提问来源于stack exchange，提问作者Meggan