Как иметь несколько страниц без нижней навигации?

Question

Я хочу иметь нижнюю навигацию в моем приложении, как описано на на этой странице , но у меня также есть страница входа, на которой не должно быть нижних навигационных вкладок. Поэтому, когда пользователь входит в приложение, ему показывают страницу входа в систему, и после входа он должен перейти на первую вкладку нижней навигации. В документах не упоминается, как это будет достигнуто. Как это можно сделать?

Попытка 1:

app. js

let startPage = 'login/login-page';
if(settings.hasKey('token')){
    startPage = 'app-root';
}
application.run({ moduleName: startPage });

Это приведет меня на страницу входа, но тогда ничто не работает, чтобы заставить меня перейти на app-root или другую подобную страницу, на которой может быть BottomNavigation

Попытка 2:

На странице входа ничего не происходит.

app. js

application.run({ moduleName: 'app-root' });

app- root. xml

<Frame defaultPage="login/login-page"></Frame>

login / login-page. js

//send email and password. check if its correct. send user forward on authentication
page.frame.navigate({
    moduleName: 'router/router-page',
    clearHistory: true
});

маршрутизатор / страница маршрутизатора. xml

<BottomNavigation id="bottomNav" automationText="tabNavigation" selectedIndex="0">
    <TabStrip>
        <TabStripItem>
            <Image src="font://&#xe41d;" class="mdi"></Image>
            <Label text="Products"></Label>
        </TabStripItem>
        <TabStripItem>
            <Image src="font://&#xe413;" class="mdi"></Image>
            <Label text="Gallery"></Label>
        </TabStripItem>
    </TabStrip>
    <TabContentItem>
        <Frame id="main" defaultPage="categories/categories-page"></Frame>
    </TabContentItem>
    <TabContentItem>
        <Frame id="gallery" defaultPage="gallery/gallery-page"></Frame>
    </TabContentItem>
</BottomNavigation>
//note there's no router-page.js
//is it necessary?

Answer 1

Вот как я наконец это сделал

приложение. js

application.run({ moduleName: 'app-root' });

приложение- root. xml

<Page actionBarHidden="true" loaded="onLoaded" xmlns="http://schemas.nativescript.org/tns.xsd">
    <Frame id="rootframe" defaultPage="{{ defaultPage }}"></Frame>
</Page>

приложение- root. js

const Observable = require("@nativescript/core/data/observable").fromObject;
const settings = require("@nativescript/core/application-settings");

exports.onLoaded = function(args){
    const page = args.object;

    page.bindingContext = Observable({
        defaultPage: (settings.hasKey('token')) ? 'router/router-page' : 'login/login-page'
    })
}

маршрутизатор / страница маршрутизатора. xml

<Page actionBarHidden="true" loaded="onLoaded" class="page" xmlns="http://schemas.nativescript.org/tns.xsd">
    <BottomNavigation id="bottomNav" automationText="tabNavigation" selectedIndex="0" selectedIndexChanged="onSelectedIndexChanged">
        <TabStrip>
            <TabStripItem>
                <Image src="font://&#xe41d;" class="mdi"></Image>
                <Label text="Products"></Label>
            </TabStripItem>
            <TabStripItem>
                <Image src="font://&#xe413;" class="mdi"></Image>
                <Label text="Gallery"></Label>
            </TabStripItem>
        </TabStrip>
        <TabContentItem>
            <Frame id="main" defaultPage="categories/categories-page"></Frame>
        </TabContentItem>
        <TabContentItem>
            <Frame id="gallery" defaultPage="gallery/gallery-page"></Frame>
        </TabContentItem>
    </BottomNavigation>
</Page>

Answer 2

Этот точный сценарий можно найти в этом посте:

https://www.nativescript.org/blog/implementing-a-login-for-nativescript-apps-with-tab-based-navigation

Репо (https://github.com/NativeScript/login-tab-navigation-ng) использует TabView, но вы можете быстро изменить его, чтобы использовать более новый BottomNavigation.