Question

我希望按照this page中的说明在应用程序中进行底部导航，但是我也有一个登录页面，该页面不应该具有底部导航选项卡。因此，当用户进入应用程序时，将显示登录页面，登录后，他应该进入底部导航的第一个标签。该文档没有提到如何实现。该怎么办？

尝试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
});

router / router-page.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

这种确切的情况可以在这篇文章中找到：

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。

Answer 2

这就是我最终做到的方式

app.js

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

app-root.xml

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

app-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'
    })
}

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

如何使某些页面没有底部导航？

2 个答案: