Navigation and Tabs in the Onsen UI React Extension

argelius

React Onsen UI

As seen in the previous blog post we have just announced a React extension for Onsen UI 2.0. It will provide all the Onsen UI custom elements in the form of React components.

Click here to see the original article

wenbolovesnz

Thank you for this post. However, it would be very appreciated if you could write up a post about how Navigator should work when we have to handle user email password login or Oauth login ?

munsterlander

@wenbolovesnz Can you create another thread in the forum so we can discuss this?

patrick

@wenbolovesnz said:

Thank you for this post. However, it would be very appreciated if you could write up a post about how Navigator should work when we have to handle user email password login or Oauth login ?

reply

You can use resetPage: https://onsen.io/v2/docs/react/Navigator.html. We are planing on writing more posts about react soon.

cyclops24

Hi @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.
Please guide me man.

iriekun

Hi! I tried everything from tutorials. I also use props initialIndex but still couldn’t make tab active initially. I use onsen-react with meteor. please guide me too!

munsterlander

@iriekun As demonstrated in the help documents, this section sets the initial state:

getInitialState: function() {
    return {
      index: 0
    }
  }

The tabs are basically a 0 based array. Change the number to indicate the tab.