1

I am trying to create a navigation bar at the bottom of my android application. I am using NativeScript for creating the application. Is there any plugin to do this? 

<page
 xmlns="http://schemas.nativescript.org/tns.xsd"
 xmlns:drawer="nativescript-telerik-ui/sidedrawer"
 xmlns:widgets="shared/widgets"
 xmlns:statusbar="nativescript-statusbar"
 xmlns:bottomnav="nativescript-bottomnavigation"
loaded="pageLoaded">
<statusbar:StatusBar ios:barStyle="light" />
<page.actionBar>
<action-bar title="NativeScript">
  <navigation-button icon="res://ic_menu" tap="toggleDrawer" ios:visibility="collapsed" />
  <action-bar.actionItems>
    <ios>
      <action-item icon="res://ic_menu" ios.position="left" tap="toggleDrawer" />
    </ios>
  </action-bar.actionItems>
  <ActionItem tap="onDelete" ios.systemIcon="16" ios.position="right" text="Delete" android.position="popup"/>
  <ActionItem id="logoutButton" tap="logOut" ios.systemIcon="16" ios.position="right" text="LogOut" android.position="popup"/>
</action-bar></page.actionBar>
 <drawer:rad-side-drawer id="drawer">
<drawer:rad-side-drawer.mainContent>
   <!-- Home page contents -->
  <StackLayout loaded="contentLoaded">
    <image src="https://i.imgur.com/LY3cb3A.png" id="logo" tap="fun" height="100" margin="20 0 0 0" />
    <label text="Welcome to the NativeScript drawer template! This is the home page. Try tapping the logo." margin="20" horizontalAlignment="center" textWrap="true" />
  </StackLayout>
   </drawer:rad-side-drawer.mainContent>
<drawer:rad-side-drawer.drawerContent>
  <widgets:drawer-content />
</drawer:rad-side-drawer.drawerContent>
 </drawer:rad-side-drawer>

4

3 回答 3

2

我研究了创建底部导航的最佳方法。

对我来说，最简单的方法是创建一个包含两行的GridLayout：一行用于滚动内容，另一行用于底部导航：

<GridLayout rows=*,60">
    <ScrollView row="0">
         ... scrolling content ...
    </ScrollView>
    <StackLayout row="1">
        ... navigation buttons ...
    </StackLayout>
</GridLayout>

第二行代表导航。在我的示例中，我使用60 dp的高度。第一行（滚动内容）占据了剩余的可用垂直空间。星号 (*) 符号表示 — 占用尽可能多的空间。

你可以在下面的文章中查看我的经验：NativeScript：如何创建固定底部导航

于 2017-05-18T21:41:13.753 回答
1

以编程方式，我建议您在没有库的情况下编写代码，以便于操作和灵活性

在您的 app.css 上考虑以下 CSS

.add-menu-btn {
    background-color: #2b2dad;
    padding: 10;
    color: #fff;
    border-radius: 50;
    text-align: right;
}

.float-menu-bottom {
    vertical-align: bottom;
    horizontal-align: right;
    padding: 5;
}

然后在您的 xml 文件中，您应该按照自己的意愿构建布局，但要保持这一点。

一步布局、主要内容和绝对布局

<Page>
    <GridLayout>
        <ScrollView>
          ...contents here or more layouts
        </ScrollView>
        <AbsoluteLayout class="float-menu-bottom">
            <StackLayout class="add-menu-btn">
                <Label text="add" class="mdi mdi-large menu-right"></Label>
            </StackLayout>
        </AbsoluteLayout>
    </GridLayout>
</Page>
于 2019-06-26T21:32:40.780 回答
0

使用这个库

解决方案 1

如需更好的解决方案，您可以在此处查看

解决方案 2

于 2017-01-24T05:28:38.163 回答