how to make tab active [onsen with react js]



  • Hello,

    I follow this tutorial https://github.com/OnsenUI/react-onsenui-kitchensink/blob/master/main.js

    but i couldn’t make the tab home active! I didn’t see any line of example code make tab active too but in demo the home tab is active.

    Could you please tell me how to make a tab active(for example Home tab) by default? What I am trying to do is after user login it will link to the tab page with home tab active

    thank you



  • Hi! any help???



  • @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.



  • @munsterlander i also tried it but it doesn’t work!!! I couldn’t understand why! It shoudn’t be that complicated!!! I also tried to use initialndex from this example
    https://onsen.io/blog/react-onsen-ui-navigator-tabs/#nodebb/comments
    but still it didn’t work too!

    here is my code

    class Home extends React.Component {
      gotoComponent(component) {
        this.props.navigator.pushPage({comp: component});
      }
    
      renderToolbar() {
        return (
          <Toolbar>
            <div className='center'>Home</div>
          </Toolbar>
        );
      }
    
      render() {
        return (
          <Page renderToolbar={this.renderToolbar}>
            <List
              renderHeader={() => <ListHeader>Components</ListHeader>}
              dataSource={[{
                name: 'Story Mission',
                component: StoryCarousel
              }, {
                name: 'Speed dials',
                component: StoryCarousel
              }]}
              renderRow={(row) =>
                <ListItem tappable onClick={this.gotoComponent.bind(this, row.component)}>
                  {row.name}
                </ListItem>
              }
            />
          </Page>
        );
      }
    }
    
    var Tabs = React.createClass({
        getInitialState: function() {
        return {
          index: 0
        }
      },
      renderTabs: function() {
        return [
          {
            content: <Home navigator={this.props.navigator}/>,
            tab: <Ons.Tab label="Home" icon="ion-ios-home-outline" active />
          },
          {
            content: <Home navigator={this.props.navigator} />,
            tab: <Ons.Tab label="Dialogs" icon="ion-ios-albums-outline" />
          },
          {
            content: <Home />,
            tab: <Ons.Tab label="Forms" icon="ion-edit" />
          }
        ];
      },
    
      render: function() {
        return (
          <Ons.Page>
            <Ons.Tabbar
              renderTabs={this.renderTabs}
            />
          </Ons.Page>
        );
      }
    });
    
    class App extends React.Component {
      renderPage(route, navigator) {
        const props = route.props || {};
        props.navigator = navigator;
    
        return React.createElement(route.component, props);
      }
    
      render() {
        return (
          <Ons.Navigator
            initialRoute={{component: Tabs, props: {key: 'main'}}}
            renderPage={this.renderPage}
          />
        );
      }
    }
    
    export default App;
    


  • @munsterlander no tab is active at all!

    0_1483038375514_Screen Shot 2016-12-29 at 20.05.43.png



  • @iriekun You have a lot of extra code that I stripped out to confirm the tabbar works. Here is your basic template working: https://codepen.io/munsterlander/pen/aBeXpb



  • @munsterlander but when I put it in the meteor project, it still doesn’t show the initial tab! I tried everything now! Could it have the conflict with meteor or what?



  • @iriekun Well, I would guess that if the code I provided works until it is rolled in with Meteor, then Meteor is the source of the issue. Now what that is, I don’t know.

    On a side note and personal thought, I always wonder why so many projects roll so many frameworks into one that duplicate a ton of the efforts. I question the need for Meteor to begin with and the same goes for Angular, React, the whole lot. Unless it is some huge and super complex application with a building of developers, it always seems like overkill.

    Ok, off my rant and back to your problem. Is anything being output into the console at all?


Log in to reply