如何在 NativeScript 中创建自定义导航栏？

Question

我是 NativeScript 的新手，正在通过 playground 尝试一下。有一些我想实现的 UI，但没有看到示例，我想知道需要什么来实现？具体来说，我想创建一个底部导航，如下所示，带有中间按钮。

Answer 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

找到示例项目

Answer 2

您可以在 NativeScript Marketplace

中轻松找到不同的 UI 个样本

我可以找到这些 bottom-bar 导航 UI:

Rich UI - Social Fitness Tracker（核心原版 JavaScript）
Tinder-like Swipeable Cards (Angular)

还有更多示例具有独特的bottom-bar导航UI设计，我建议您自己探索示例市场以找到您最喜欢的。

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

如何在 NativeScript 中创建自定义导航栏？

How to create a custom navigation bar in NativeScript?

android

ios

nativescript

nativescript-angular