如何在NativeScript中创建自定义导航栏? [英] How to create a custom navigation bar in NativeScript?
本文介绍了如何在NativeScript中创建自定义导航栏?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是NativeScript的新手,正在操场上尝试了一下.有一些我想实现的UI,但没有看到其示例,我想知道要实现什么?具体来说,我想使用中间按钮创建如下所示的底部导航.
解决方案
以下是伪代码,可为您提供所需的布局.
<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布局的更多信息. 您还可以在市场
I am new to NativeScript and experimenting with it a little via the playground. There are some UIs that i'd like to implement and don't see samples of and I was wondering what would it take to implement? specifically, I'd like to create a bottom navigation such as below, with the middle button.
解决方案
Here is a pseudocode gives you the layout you are looking for.
<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>
Lear more about NativeScript layouts at https://www.nslayouts.com/ You can also find sample projects at Marketplace
这篇关于如何在NativeScript中创建自定义导航栏?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文