发现很难找到本机脚本的xml示例。是否有本机脚本的bootsnip?

时间:2016-10-27 20:52:13

标签: nativescript

我正在尝试在本机脚本中创建一个底栏。我的第一次尝试是基于非常基本的想法。我正在考虑使用字体awesome然后将单词放在图标下方。我的问题是有没有这个或网站的样本xml,其中xml像bootsnip for bootstrap以及下面的代码是否是完成图片中描述的目标底部导航栏的好方法。

enter image description here

 <DockLayout stretchLastChild="true">
        <StackLayout dock="bottom" verticalAlignment="bottom" stretch="fill">
            <StackLayout orientation="horizontal" horizontalAlignment="center">
                <Label text="Home" dock="left" backgroundColor="red"></Label>
                <Label text="Medications" dock="left" backgroundColor="green"></Label>
                <Label text="Medication Detail" dock="left" backgroundColor="blue"></Label>
                <Label text="Whatever" backgroundColor="yellow"></Label>
            </StackLayout>
        </StackLayout>
    </DockLayout>

1 个答案:

答案 0 :(得分:3)

您可以使用NativeScript Tab View Sample code

试试这个: 您可以将ScrollView替换为ListView

<GridLayout rows="*, auto, auto">
    <ScrollView row="0">
        <StackLayout row="0" backgroundColor="#eeeeee">
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
            <Label text="Hello world" textWrap="true"></Label>
        </StackLayout>
    </ScrollView>
    <StackLayout height="2" backgroundColor="#777" row="1"></StackLayout>
    <GridLayout class="foot" columns="*,*,*,*" row="2">
        <Label col="0" text="" textWrap="true"></Label>
        <Label col="1" text="" textWrap="true"></Label>
        <Label col="2" text="" textWrap="true"></Label>
        <Label col="3" text="" textWrap="true"></Label>
    </GridLayout>
</GridLayout>
   .foot {
        background-color: #ccc;
    }

    .foot label {
        text-align: center;
        vertical-align: middle;
        padding: 10;
        font-size: 20;
    }

enter image description here