Question

在我的NativeScript项目中，我试图用图标创建一个底部栏，然后在其下方添加类似于该名称的单词。像这样

这是我尝试执行的操作：

<GridLayout rows="*,60">
    <ScrollView row="0">
        <WrapLayout orientation="horizontal">
            <Label text="There are no leagues currently." style="color: black; text-align: center; font-weight: bold"></Label>
            <Label text="Contact your commissioner" style="color: black; text-align: center; font-weight: bold"></Label>
            <Label text="to create one." style="color: black; text-align: center; font-weight: bold"></Label>
        </WrapLayout>
    </ScrollView>
    <StackLayout row="1" orientation="horizontal">
        <Button textWrap="true" width="25%">
            <FormattedString>
                <Span text="&#xf015;\n" class="fa"></Span>
                <Span text="Home"></Span>
            </FormattedString>
        </Button>
        <Button textWrap="true" width="25%">
            <FormattedString>
                <Span text="&#xf000;\n" class="fa"></Span>
                <Span text="All Cocktails"></Span>
            </FormattedString>
        </Button>
        <Button textWrap="true" width="25%">
            <FormattedString>
                <Span text="&#xf005;\n" class="fa"></Span>
                <Span text="Favorite"></Span>
            </FormattedString>
        </Button>
        <Button textWrap="true" width="25%">
            <FormattedString>
                <Span text="&#xf007;\n" class="fa"></Span>
                <Span text="Profile"></Span>
            </FormattedString>
        </Button>
    </StackLayout>
</GridLayout>

这是我的CSS：

.fa {
    font-family: 'Font Awesome 5 Free';
}

但是，每当我尝试执行此操作时，结果就会这样显示

我不确定要去哪里，所以任何帮助都很好。谢谢！

这是我的代码的有效示例：https://play.nativescript.org/?template=play-ng&id=r8Jodt&v=19

Answer 1

使用GridLayout for BottomBar，您可以寻找游乐场样本here

<GridLayout columns="*,*,*,*" rows="*,*" width="100%" row="1" backgroundColor="lightgray">
  <Label text="&#xf015;" row="0" col="0" class="fa" width="100%" textAlignment="center"></Label>
  <Label text="Home" row="1" col="0" width="100%" textAlignment="center"></Label>
  <Label text="&#xf000;" row="0" col="1" class="fa" width="100%" textAlignment="center"></Label>
  <Label text="All Cocktails" row="1" col="1" width="100%" textAlignment="center"></Label>
  <Label text="&#xf005;" row="0" col="2" class="fa" width="100%" textAlignment="center"></Label>
  <Label text="Favorite" row="1" col="2" width="100%" textAlignment="center"></Label>
  <Label text="&#xf007;" row="0" col="3" class="fa" width="100%" textAlignment="center"></Label>
  <Label text="Profile" row="1" col="3" width="100%" textAlignment="center"></Label>

</GridLayout>

Answer 2

这里的实际问题是\n仅适用于JavaScript，而在HTML（XML）文件中使用它时，您应该使用字符
的编码版本，这应该给您一个新行。

您是否要为TabView创建自定义TabBar？如果是，则可以尝试使用nativescript-vector-icons，它允许您使用TabBar上的字体图标。

Answer 3

将它们的位置设置为display：absolute，并且在类中应为内联块。有一些余量，应该很容易调整

Answer 4

我将在一个div中包含所有按钮，然后在其自己的div中包含每个按钮和标签组。

<div id='button-row'>
  <div class='bottom-button>
     <button></button>
     <p class='label>Label</p>
  </div>
   <div class='bottom-button>
     <button></button>
     <p class='label>Label</p>
  </div>
  // repeat for your buttons
</div>

您的CSS：

.button-row {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}
.bottom-button {
   display: flex;
   flex-direction: column;
   justify-content: center;
   // the font awesome icons are considered text I believe, so 
   text-align: center;
   // would also work
}

这将使行中的所有按钮均匀分布，并将按钮放在标签上方。我喜欢使用flexbox，因为它快速，轻松并且对移动设备敏感。无论如何，我都不是CSS专业人士，但是对我有用。

编辑：刚刚看到了您的标记。尝试为格式化的字符串提供.bottom-button的CSS，看看是否可行。

Answer 5

对于 \n 只适用于 android。使用十六进制代码也不适用于 ios 和 android。

我找到的最终解决方案如下：

（对于 nativescript-vue）

    <Label textWrap="true" col="0" row="0">
      <FormattedString>
        <Span class="number" :text="days" />
        <Span class="format" :text="'\n' + 'Gün'" />
      </FormattedString>
    </Label>

如何从XML向Button添加新行

5 个答案: