Navigator


  • Onsen UI

    This component is responsible for page transitioning and managing the pages of your OnsenUI application. In order to manage to display the pages, the navigator needs to define the renderPage method, that takes an route and a navigator and converts it to an page.

    Click here to see the original article



  • Being a reference page for a Component, the information is incomplete. e.g. the Props section has no mention of pushPage and popPage functions.



  • @jackhung Thanks! We will add docs for the methods as well. Thanks for mentioning



  • Please refactor resetPage to resetToPage for make things equal to core.



  • @argelius , @munsterlander
    Is it possible to pass some props to component through navigator?
    For example:

    navigator.pushPage({
                    component: login,
                    key: 'Login_Index',
                    role: role
                });
    

    And access role with this.props.role.



  • @cyclops24 I am not a React user so my answer is with limited knowledge, but based on the docs, I would say it is not possible at this time. Hopefully, the team will come in and correct me! :)



  • Thanks @munsterlander for your attention. So I’m waiting for @argelius and other guys for reply.
    I think OnsenUI React version needs some more docs and example.



  • @cyclops24 It is:

    navigator.pushPage({
                    component: login,
                    props: {
                        key: 'Login_Index',
                        role: role
                    }
                });
    


  • @eknoes Thanks man. You save me.
    If you have time please see this other question too:
    https://community.onsen.io/topic/1009/manage-splitterside-for-use-it-as-reusable-component



  • @eknoes: Really? Does this work? With OnsenUI2.0.3 and React-Onsen 1.0.3 this does not seem to work.



  • Is there a way to pop multiple pages? The methods I found online doesn’t work with React. http://codepen.io/onsen/pen/Exqze

    I also tried resetPage, it sort of works. Here’s what I did:
    navigator.push(pageA1);
    navigator.push(pageB1);
    navigator.push(pageC1);
    navigator.resetPage(pageA2); //A2 is component A with a different key.

    There are two major constraints with this method:

    1. the reseted page requires a unique key.
    2. onShow on pageA1 will be called (which I don’t really understand why). I ended up having onInit of A2 and onShow of A1 being called at the same time.

    What I really want to is to pop back to A1. I am surprised that there is no easy way to deal with this use case.

    Thanks for helping out!



  • The Onsen UI tutorial for React regarding the navigation via a side menu does no cover handling the click on a menu item. I do have a question about this part.

    Let’s say that I have an app with a side-menu. It is a tree structure; there is no shortcut from a lower level menu item (e.g. Item 1.1) to another lower level item (e.g. Item 2.1) from a different Menu.

    I am not making use of Redux by the way. In the App component I initialise the routing for the Root component. I am wondering which construct I should use to render the appropriate page given a click on a menu item (e.g. Menu item 2). Do you have any suggestions for me?

    Menu structure:

    MenuRoot
     |- Menu item 1
            |- Item 1.1
            |- Item 1.2
            |- ...
     |- Menu item 2
            |- Item 2.1
            |- Item 2.2
            |- ...
     |- ...
    

    Code for the Appcomponent (top-level component), the entry-point for the side-menu code:

    ...
    
    // App component
    <Navigator
        renderPage={ this.renderPage }
        initialRoute={ { component: MenuRootPage, key: 'MENUROOT' } }
    />
    
    ...
    

    The UI component for the side menu:

    ...
    
    const menuData = [ 
        { index: 1, title: "Menu item 1", component: "M1", icon: ... }, 
        { index: 2, title: "Menu item 2", component: "M2", icon: ... },
        { index: 3, title: "Menu item 3", component: "M3", icon: ... },
        { index: 4, title: "Menu item 4", component: "M4", icon: ... }
    ]; 
    
    ...
        
    <List
        dataSource={ menuData  }
        renderHeader={ () => <ListHeader>Menu</ListHeader> }
        renderRow={ ( data ) => {
                return <ListItem 
                        key={ `menuItem-${data.index}` } 
                        modifier='longdivider' 
                        tappable >
                        <Icon
                            icon={ data.icon } 
                            size="50px" 
                            fixed-width="true"
                        />
                        { `${data.title}` }
                    </ListItem>
                }
            }
        />
    


  • This took me way too long to figure out, and was helped by the people here https://github.com/OnsenUI/OnsenUI/issues/1547
    Since Navigator takes an arbitrary route object, basically you pass the props you want to reach your page into the route object. But what if you determine the props at runtime? Pretty easy.

    //route object
    {
    component: Page,
    title: ‘Some title’,
    anotherKey: 12345
    }

    Implement your own version of pushPage() and add the props onto the route object:
    pushPage(route, navigator, props = {}){
    route.props = props;
    navigator.pushPage(route);
    }

    Then pass that object using the spread operator into the Page component:
    renderPage(route, navigator){
    const componentOptions = {
    key: route.title,
    renderToolbar: this.renderToolbar.bind(this, route, navigator),
    navigator,
    pushPage: this.pushPage.bind(this)
    }
    return <route.component {…route.props} {…componentOptions} />;
    }

    Hope it helps anyone else who needs to pass props through navigator!


Log in to reply