Как создать нижнюю панель навигации

Question

Я пытаюсь создать в своем приложении простую фиксированную нижнюю панель навигации, используя плагин nativescript-bottom-navigation , и продолжаю получать ошибки. Он не будет построен, и из множества ошибок, отображаемых на этом ужасном ИСКЛЮЧИТЕЛЬНОМ черном экране, «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>

и вот ...

поиск ракурса-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> для добавления значка и текста.

Демонстрация игровой площадки