如何在 NativeScript 应用程序中将页面分成多个部分

Question

我是第一次使用 NativeScript 创建应用程序，我想将屏幕分成两部分（一个有白色背景和圆角）。如果我要创建一个 HTML 网页，我会使用 Flexbox。

在我的 NativeScript Angular 应用程序中，我是这样做的：

<FlexboxLayout flexDirection="column">

    <Label height="200px" >
    </Label>

    <Label height="1000px" backgroundColor="white" style="border-radius: 80px 80px 0px 0px;"> 

            <Button class="btn btn-primary btn-active" id="button" text="Tap me!"></Button>


    </Label>


</FlexboxLayout>

它看起来不错，但此标签上没有显示任何内容。我应该如何划分我的应用程序页面？

Answer 1

这看起来您没有将标签用于正确的目的。根据提供的代码示例，我想您会想要这样的东西。

<GridLayout rows="200 *" columns="*">
 <Label />
 <GridLayout row="1" backgroundColor="white" rows="*" columns="*" style="border-radius: 80 80 0 0">
    <Button class="btn btn-primary btn-active" id="button" text="Tap me" />
  </GridLayout>
</GridLayout>

标签只能像这样与 FormattedString 和 Span 标签一起使用。

<Label>
   <FormattedString>
        <Span>Some text</Span>
        <Span style="color: blue"> with partial style</Span>
   </FormattedString>
</Label>

GridLayout 将是您在 Nativescript 中最好的朋友，并且比 FlexboxLayout 的性能要好得多，所以请尽可能使用它。

如何在 NativeScript 应用程序中将页面分成多个部分

How can I divide page into parts in NativeScript app

nativescript

nativescript-angular