react native - How to navigate to different screen and get back to the screen from where its navigated using DrawerNavigator? -
i have 2 components (list , detail):
list.js:
export default class list extends react.component { render() { const {navigate} = this.props.navigation; return ( <view style={styles.container}> <text style={styles.headertext}>list of contents</text> <button onpress={()=> navigate('detail')} title="go details"/> </view> ) } }
detail.js:
export default class detail extends react.component { render() { return ( <view> <text style={styles.headertext}>details of content</text> </view> ) } }
i have 2 screens (nowlist , soonlist) same type of list, using same list component both screen. , each of these screens want navigate details of item, in case has same type of layout using detail component both list items.
finally, when app starts want nowlist screen show. , using drawer navigate soonlist screen.
i not sure how configure route. but, how have configured routes now:
const nowstack = stacknavigator({ nowlist: { screen: list, navigationoptions: { title: 'now', } }, detail: { screen: detail, navigationoptions: { title: 'detail', } } }); const soonstack = stacknavigator({ soonlist: { screen: list, navigationoptions: { title: 'soon', } } }); export const drawer = drawernavigator({ now: { screen: nowstack, }, soon: { screen: soonstack, } });
when navigate nowlist route detail route. there's button in detail route on press navigates nowlist.
however, when go route, , navigate detail route, go detail screen. but, when press button on detail navigation header, instead of navigating soonlist screen, navigated nowlist screen.
i think missing here, or route layout not how suppose be. me how configure routes can use drawernavigator navigate different screens, , screens navigate screen , again screen navigated from?
you can make stack navigator contain drawer navigator , detail, way can access both list , list drawer , able navigate detail screen both list.
const app = stacknavigator({ drawer: { screen: drawer, }, detail: { screen: detail, navigationoptions: { title: 'detail', }, }, }); const drawer = drawernavigator({ nowlist: { screen: list, }, soonlist: { screen: list, }, });
Comments
Post a Comment