0

我是 NativeScript 的新手,并通过操场对它进行了一些试验。我想实现一些 UI,但没有看到示例,我想知道要实现什么?具体来说,我想用中间按钮创建一个底部导航,如下所示。

底部导航

4

2 回答 2

1

这是一个伪代码,可为您提供您正在寻找的布局。

<GridLayout>
    <GridLayout rows="*,auto">
        <StackLayout row="0" backgroundColor="#ccc">
            <Label text="Your Content" fontSize="30" textAlignment="center"></Label>
        </StackLayout>
        <GridLayout row="1" columns="*,*" height="48">
            <StackLayout col="0">
                <Image></Image>
                <Label text="Groups" textAlignment="center"></Label>
            </StackLayout>
            <StackLayout col="1">
                <Image></Image>
                <Label text="Communities" textAlignment="center"></Label>
            </StackLayout>
        </GridLayout>
    </GridLayout>
    <GridLayout borderRadius="50%" width="68" height="68" backgroundColor="#ec5281"
        verticalAlignment="bottom" horizontalAlignment="center" marginBottom="20">
        <Label text="Post" color="white" verticalAlignment="center"
            horizontalAlignment="center"></Label>
    </GridLayout>
</GridLayout>

在https://www.nslayouts.com/了解有关 NativeScript 布局的更多信息 您还可以在Marketplace找到示例项目

于 2019-06-20T20:23:14.730 回答
-1

您可以在NativeScript Marketplace中轻松找到各种 UI 示例

我可以找到这些底部栏导航 UI:

  1. 丰富的 UI - 社交健身追踪器(Core Vanilla JavaScript)

    在此处输入图像描述

  2. 类似火种的可刷卡(Angular)

    在此处输入图像描述

还有很多带有独特底部导航 UI 设计的示例,建议您自行探索示例市场以找到您最喜欢的示例。

此外,还有nativescript-bottom-navigation,一个经过验证的用于实现底栏导航的插件。

于 2019-06-20T20:36:09.060 回答