Open clipsmm opened 7 years ago
@mitajunior , you can initialize with the stackNavigator with login component as inital and then push tab or drawer page with its tab initalized with the initial page you want like this:(You can use tabNavigator instead)
`
<StatusBar
hidden={true}
/>
<StackNavigation initialRoute={Router.getRoute('login')}
navigatorUID="mainNav"
defaultRouteConfig={{
navigationBar: {
visible: false,
}
}}/>
</NavigationProvider>
</Provider>`
'then on login button you can push drawer screen. Here is my drawer screen:
`export default class DrawerNavigationLayout extends React.Component { constructor(props){ super(props); } static route = { navigationBar: { visible: false, } }; closePressed = () => { const { navigation } = this.props; const navigator = navigation.getNavigator('mainDrawer'); navigator.toggleDrawer() }; render() { return ( <DrawerNavigation id='mainDrawer' navigatorUID="drawerNav" initialItem='home' drawerWidth={Constant.screenWidth} renderHeader={this._renderHeader}
<DrawerNavigationItem id='home' selectedStyle={styles.selectedItemStyle} renderTitle={isSelected => this._renderTitle('Home', isSelected)}
<StackNavigation id='home' initialRoute={Router.getRoute('homeScreen')} />
<DrawerNavigationItem
id='Updates'
selectedStyle={styles.selectedItemStyle}
renderTitle={isSelected => this._renderTitle('Updates', isSelected)}
>
<StackNavigation
id='Updates'
initialRoute={Router.getRoute('AllUpdates')}
/>
</DrawerNavigationItem>
<DrawerNavigationItem
id='Payments'
selectedStyle={styles.selectedItemStyle}
renderTitle={isSelected => this._renderTitle('Payments', isSelected)}
>
<StackNavigation
id='Payments'
initialRoute={Router.getRoute('AllPayments')}
/>
</DrawerNavigationItem>
<DrawerNavigationItem
id='Services'
selectedStyle={styles.selectedItemStyle}
renderTitle={isSelected => this._renderTitle('Services', isSelected)}
>
<StackNavigation
id='Services'
initialRoute={Router.getRoute('AllServices')}
/>
</DrawerNavigationItem>
<DrawerNavigationItem
id='Account'
selectedStyle={styles.selectedItemStyle}
renderTitle={isSelected => this._renderTitle('Account', isSelected)}
>
<StackNavigation
id='Account'
initialRoute={Router.getRoute('Account',{navData: this.props.navigator})}
/>
</DrawerNavigationItem>
<DrawerNavigationItem
id='Support'
selectedStyle={styles.selectedItemStyle}
renderTitle={isSelected => this._renderTitle('Support', isSelected)}
>
<StackNavigation
id='Support'
initialRoute={Router.getRoute('Support')}
/>
</DrawerNavigationItem><DrawerNavigationItem
id='Refer'
selectedStyle={styles.selectedItemStyle}
renderTitle={isSelected => this._renderTitle('Refer A Friend', isSelected)}
>
<StackNavigation
id='Refer'
initialRoute={Router.getRoute('Refer')}
/>
</DrawerNavigationItem>
</DrawerNavigation>
);
}
_renderHeader = () => { return (
);
};
getIcon = (title) =>{
if (title === "Home"){
return <FontAwesome name='home' size={25} style={[cs.transparentBackground, cs.colorA8]} />
}else if(title === "Updates"){
return <FontAwesome name='bell' size={25} style={[cs.transparentBackground, cs.colorA8]} />
}else if(title === "Payments"){
return <FontAwesome name='money' size={25} style={[cs.transparentBackground, cs.colorA8]} />
}else if(title === "Services"){
return <FontAwesome name='cubes' size={25} style={[cs.transparentBackground, cs.colorA8]} />
}else if(title === "Account"){
return <FontAwesome name='user' size={25} style={[cs.transparentBackground, cs.colorA8]} />
}else if(title === "Support"){
return <FontAwesome name='handshake-o' size={25} style={[cs.transparentBackground, cs.colorA8]} />
}else if(title === "Refer A Friend"){
return <FontAwesome name='user-plus' size={25} style={[cs.transparentBackground, cs.colorA8]} />
}
};
_renderTitle(text: string, isSelected: boolean) {
return (
<Row style={{paddingLeft: 20,paddingRight: 0,paddingTop: 0,paddingBottom: 0,marginLeft: 10}}>
<Col size={1} style={[cs.jcCenter]}>
<Text style={[cs.jcCenter]}>
{this.getIcon(text)}
</Text>
</Col>
<Col size={4} style={[cs.pl1,cs.jcCenter]}>
<Text style={[cs.colorA8,cs.fontKorolevBold, csFont.TITLE_FONT]}>{text}</Text>
</Col>
</Row>
);
};
}`
Hi, would you kindly provide an example for conditional routing. Example Dashboard (TabView) Login (Stackview) The idea is when the app is launched we start with login the if success we change route to the dashboard
Please help