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

Question

我是NativeScript的新手，正在操场上尝试一下。我想实现一些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示例

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

1. Rich UI - Social Fitness Tracker（Core Vanilla JavaScript）

   

2. Tinder-like Swipeable Cards（有角）

   

还有更多具有独特的底部导航栏UI设计的示例，建议您亲自探索示例市场以找到最喜欢的示例市场。

此外，还有nativescript-bottom-navigation，这是一个已验证的插件，可用于实现底部导航。