Getting parent Page from nested Frame


#1

Hello guys.
I have the following layout:

<Page id="starter-page" xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" actionBarHidden="true">
    <TabView id="starter-tab-view">
        <TabViewItem title="Page1" iconSource="~/images/page1.png">
            <Frame defaultPage="screens/page1/page1"></Frame>
        </TabViewItem>
        <TabViewItem title="Page2" iconSource="~/images/page2.png">
            <Frame defaultPage="screens/page2/page2"></Frame>
        </TabViewItem>
        <TabViewItem title="Page3" iconSource="~/images/page3.png">
            <Frame defaultPage="screens/page3/page3"></Frame>
        </TabViewItem>
    </TabView>
</Page>

How can I get a reference to the TabView from inside the child frames? (page1, 2, and 3)
Am I doing the layout correctly?
Keep in mind that the parent Page (id=“starter-page”) is inside the original app Frame.

The layout hierarchy is as follows:

Frame(id="app-top")
    Page(id="someID1")
    Page(id="someID2")
    Page(id="starter-page")
        TabView(id="starter-tab-view")
            TabViewItem1
                Frame
                    Page1
                        Child Views...
            TabViewItem2
                Frame
                    Page2
                        Child Views...

I tried doing frame.topmost() but it shows the Frame under the TabViewItem and frame.getFrameById("app-top") returns null because (I think) I’m doing:

navigationOptions = {clearHistory: true, ...}

when navigating to Page(id="starter-page") which I’m assuming removes any references to previous frames/pages.

Any tips would be highly appreciated.


#2

topmost() always returns the latest frame on stack that was used for navigation. To get specific frame, assign a id to it and call getFrameById(withYourId). Once you have the frame reference, simply calling .page on frame will return the page that owns the frame.


#3

Sorry for the late reply. I did try calling getFrameById(‘app-top’) but returns undefined.

Calling getFrameById('app-top') BEFORE navigate({clearHistory: true}) returns the right frame, but after navigating and clearing the history, it returns undefined.

I did work around the problem for the time being by getting the topmost() frame and calling .parent.parent on it to get the desired view. However, the original issue was confusing.


#4

Is it happening on with both iOS and Android?
Do you have a playground example that helps to verify the issue?