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!
-
@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?