I want to write an app in Ionic 3 in which I have two pages with <ion-tabs> each containing 4 <ion-tab>s. I wrote two pages called home and hometwo (referred to as basepages). In each html I declared the ion-tabs.
Then I made 4 pages (about, abouttwo, contacts, contactstwo; referred to as tabpages), two of each are in the <ion-tab>s of the each homepage.
Next I made a button on the first homepage that pushes the second home page on to the navCtrl. (I didn’t put the button on one of the tab pages, because then the page would’ve gotten pushed onto that nav, since each tab page seems to have it’s own nav https://ionicframework.com/docs/api/components/tabs/Tab/).
The second basepage gets pushed onto the stack and displays the new tabs along with their respective names icons and content.
The second basepage gets pushed onto the stack and displays the new tabs along with their respective names and icons. BUT the content of the pages is the one of the respective tabs of the first basepage. Only after clicking each new tab will the content change.
Does anyone know how to fix this?
(One of my less than good solution ideas, which I couldn’t figure out how to do, involved “ghost-clicking” all the tabs once as soon as the page loads… So yeah )
Hi @judgewest2000. Thank you for your answer! Yeah the approach using segments is my emergency solution, but It would be awesome to get it working using actual tabs (amongst other things, because of icons + words = better UX)
Your solution works visually right, but navigation stack is messed up.
You add push pages as subpages of the root tabs components. Hiding tabs bar makes illusion of navigating to totally separate page. But in markup we see outer tabs with inner tabs bar. @Hesters, if it was what you were looking for, that’s good.
Maybe you have any solution with correct navigation?