If TabView is your preferred way for app navigation, then the process is slightly different. To create a new project with a SideDrawer, call tns create my-drawer-ts -template tns-template-drawer-navigation-ts. You can see this in action in Playground:įor your convenience, there is already a project template with a SideDrawer already configured. Before in app.ts, we used to call app.start() (as of from "nativescript-ui-sidedrawer" Ĭonst drawerComponent = app.getRootView() One of the changes introduced, is the way we bootstrap the app.
TabView Navigation using NativeScript AngularĪll projects created with tns create using NativeScript 4+ are Flexible Frame Composition ready.SideDrawer Navigation using NativeScript Angular,.TabView Navigation using NativeScript Core,.SideDrawer Navigation using NativeScript Core,.In this article we will cover, creating apps with: The outcome? A less resource hungry app with a more pleasant user experience. This way the side drawer (or the tab view) needs to be created only once. Dynamic - which is the part that we would use to host the content for each page.
Previously, if you wanted to navigate deep inside one of the tabs - you had to create a similar page (with the whole TabView definition inside it) and navigate to it (this is because each navigation was swapping the whole screen content). This effectively means that the Frame will swap different Pages inside the same SideDrawer instance (effectively reusing it). So now you can set the SideDrawer as the application root and put the Frame inside its main content. In the NativeScript 4.0 you have control over which element should be the root of the app and where (and if) to put a Frame which will host your Pages. OK, that was oversimplified and not entirely correct. TL DR: NativeScript 4.0 can share content between pages - no RAM or CPU cycles waste and better performance As a result the app creates a new instance of the side drawer every time it navigates, meaning more RAM used, more CPU cycles spent and slower performance. Since each time the app navigates, all of its content gets replaced, that means that we have to add a side drawer to each page. The problem starts when you need to add a SideDrawer (or a TabView) for Navigation. I am on page A, so the main Frame contains A, then I navigate to page B, and now the main Frame contains B.
#Nativescript tabview with routing full#
Because this Frame is the root of the app, it is always full screen and so are all the Pages loaded inside it.Īt first, this doesn't sound like a big deal. It hosts the pages when navigiating to them). In previous versions of NativeScript we would always have a single Frame in the root of the app (Note: The Frame is the element responsible for navigation. TL DR: Old NativeScript can't share content between pages - more memory required, more CPU usage and slower performance Making it more flexible (hence the title) and a lot more intuitive. One of the most significant changes we introduced in NativeScript 4.0 is the way we interact with the main Frame of the app.
0 kommentar(er)
