如何创建底部导航栏

Question

我正在尝试使用nativescript-bottom-navigation plugin 在我的应用程序中创建一个简单的固定底部导航栏 - 并且不断出现错误。它不会构建，并且在那个可怕的异常黑屏中显示的许多错误中，是“AHBottomNavigation 不是构造函数”。

我只想要固定导航中的 3 个图标：主页、帐户、程序

我使用的是纯 Javascript，演示教程使用 TypeScript。这可能是问题所在。

我遵循的步骤

1. 我使用命令行安装了插件。
2. 我将我的图标手动添加到资源文件夹中

我的搜索页面 [导航所在的位置]

<Page
    navigatingTo="onNavigatingTo"  
    xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:bottomNav="nativescript-bottom-navigation"  
    class="page">

    <ActionBar class="action-bar">
        <!-- 
        Use the NavigationButton as a side-drawer button in Android
        because ActionItems are shown on the right side of the ActionBar
        -->
        <NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
        <!-- 
        Use the ActionItem for IOS with position set to left. Using the
        NavigationButton as a side-drawer button in iOS is not possible,
        because its function is to always navigate back in the application.
        -->
        <ActionItem icon="res://navigation/menu" 
            android:visibility="collapsed" 
            tap="onDrawerButtonTap"
            ios.position="left">
        </ActionItem>
        <Label class="action-bar-title" text="Search"></Label>
    </ActionBar>

    <GridLayout columns="*"
                rows="*, auto">
        <StackLayout row="0">
            <Label text="content"></Label>
        </StackLayout>
        <bottomNav:BottomNavigation tabs="{{ tabs }}"
                                    activeColor="green"
                                    inactiveColor="red"
                                    backgroundColor="black"
                                    keyLineColor="black"

                                    row="1"></bottomNav:BottomNavigation>
    </GridLayout>




</Page>

这里是……

search-view-model.js

const observableModule = require("tns-core-modules/data/observable");

const SelectedPageService = require("../shared/selected-page-service");
const BottomNavigation = require("nativescript-bottom-navigation").BottomNavigation;
const BottomNavigationTab = require("nativescript-bottom-navigation").BottomNavigationTab;
const OnTabSelectedEventData = require("nativescript-bottom-navigation").OnTabSelectedEventData;


function SearchViewModel() {
    SelectedPageService.getInstance().updateSelectedPage("Search");

    const viewModel = observableModule.fromObject({
        /* Add your view model properties here */
        tabs: [
            new BottomNavigationTab('First', 'ic_home'),
            new BottomNavigationTab('Second', 'ic_view_list'),
            new BottomNavigationTab('Third', 'ic_menu')
          ]
    });

    return viewModel;
}

module.exports = SearchViewModel;

我无法理解设备上显示的错误屏幕（我正在 Android 设备上进行测试）。

有人知道我哪里出错了吗？任何指针将不胜感激。

谢谢。

Answer 1

您可以使用<DockLayout> 来实现相同的功能，而无需使用任何插件。

<DockLayout height="100%">
<!-- bottom navigation buttons -->
<StackLayout dock="bottom" height="50" class="bottom-navigation" orientation="horizontal">
    <Button text="Home"/>
    <Button text="Accounts"/>
    <Button text="Programs"/>
</StackLayout>
<!-- other top content -->
<Button dock="top" text="Other Content"/>
</DockLayout>

然后使用CSS 规范化布局：

.bottom-navigation {
    background-color:#54d4aa;
}
.bottom-navigation button {
    width: 33.33%;
    background-color:#54d4aa;
    border-color: transparent;
    border-width: 1;
    color:white;
}

您可以将<Button> 替换为<StackLayout> 以添加图标和文字。

Playground Demo