Question

我正在尝试在我的Android应用程序底部创建一个导航栏。我使用NativeScript来创建应用程序。有没有插件可以做到这一点？

<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>

Answer 1

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

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

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

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

您可以在以下文章中查看我的体验：NativeScript: how to create a fixed bottom navigation

Answer 2

使用此库

Solution 1

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

Solution 2

Answer 3

以编程方式，我建议您编写不带库的代码，以便于操作和灵活使用

在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>

Android应用程序的底部导航栏（NativeScript）

3 个答案: