Question

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

我只想要固定导航中的3个图标：“家”，“帐户”，“程序”

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

我遵循的步骤

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

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

;WITH cte as (
    SELECT UNITID, INSTNM, CUML_DEBT_N, C150_4_POOLED_SUPP
        , CUML_DEBT_P10_ASC = ROW_NUMBER() OVER (ORDER BY CUML_DEBT_P10 ASC)
        , CUML_DEBT_P10_DESC = ROW_NUMBER() OVER (ORDER BY CUML_DEBT_P10 DESC)
        , CUML_DEBT_P25_ASC = ROW_NUMBER() OVER (ORDER BY CUML_DEBT_P25 ASC)
        , CUML_DEBT_P25_DESC = ROW_NUMBER() OVER (ORDER BY CUML_DEBT_P25 DESC)
        , CUML_DEBT_P75_ASC = ROW_NUMBER() OVER (ORDER BY CUML_DEBT_P75 ASC)
        , CUML_DEBT_P75_DESC = ROW_NUMBER() OVER (ORDER BY CUML_DEBT_P75 ASC)
        , CUML_DEBT_P90_ASC = ROW_NUMBER() OVER (ORDER BY CUML_DEBT_P90 ASC)
        , CUML_DEBT_P90_DESC = ROW_NUMBER() OVER (ORDER BY CUML_DEBT_P90 DESC)
    FROM    [dbo].[MERGED2013_DebtOnly])
SELECT * FROM cte
WHERE INSTNM = 'Stetson University';

这是...

search-view-model.js

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

我无法理解在我的设备上显示的错误屏幕（我正在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

如何创建底部导航栏

1 个答案: