javascriptauthenticationnativescripttabview

NATIVESCRIPT - Core (JS) - Switching between TabView and BLANK page


I'm working on an app which is based on TabViews. But if user is not logged in, I wanna show a login screen on app start, respectively the login screen after logout. The login screen should not be in a frame of the TabView.

TabView is set in app-root.xml.

<TabView loaded="onLoadedTabView" id="tabView" androidTabsPosition="bottom">
    <TabViewItem title="Home">
        <Frame defaultPage="home/home-page"></Frame>
    </TabViewItem>

    <TabViewItem title="Second">
        <Frame defaultPage="second/second-page"></Frame>
    </TabViewItem>

    <TabViewItem title="Third">
        <Frame defaultPage="third/third-page"></Frame>
    </TabViewItem>
</TabView>

I have a login-root.xml to load the login page

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

In app.js, I wanna decide, if starting "app-root" or "login-root" first.

const appSettings = require("application-settings");
let application = require("tns-core-modules/application");


if (typeof appSettings.getString('username') === 'undefined') {
    application.run({ moduleName: "login-root" });
} else {
    application.run({ moduleName: "app-root" });
}

If I now load LOGIN first, I run the TabView with application.run({ moduleName: "app-root" }); again. I think, this is not the best way.

How can I load and render the TabView?

I have a NS-PLAYGROUND app, where you hopefully can help me. I really appreciate a solution:

https://play.nativescript.org/?template=play-js&id=fk1uUx


Solution

  • You may simply call application._resetRootView(...) to replace your root view with TabView or back to login frame as needed.

    Playground Sample

    Another options is create new page that includes the TabView and load the page into the login frame.