ios - React Native: One Menu for All pages (Stack Navigation) -
i attempting develop first react-native app , implemented stack navigation circle-action-menu. issue have menu shows on homescreen. want able create separate component menu can add component pages realized pages re-rendering same elements in sense turns mess of "titles".
example: https://www.dropbox.com/s/vk80ikdn466clg3/screen%20shot%202017-08-14%20at%203.13.16%20pm.png?dl=0)
how can reuse menu of pages? ideas? app.js:
import react 'react' import { view, stylesheet } 'react-native' import homescreen './components/homescreen' class app extends react.component{ render(){ return( <view style={styles.container}> <homescreen/> </view> ) } } const styles = stylesheet.create({ container:{ flex: 1 } }) export default app
homescreen.js:
import react 'react' import { text, stylesheet, view, color } 'react-native' import {stacknavigator} 'react-navigation' import actionbutton 'react-native-circular-action-menu' import icon 'react-native-vector-icons/ionicons' class faqscreen extends react.component { static navigationoptions = { title: 'faq', }; render() { return ( <view style={styles.main}> <text>yo</text> </view> ); } } class aboutscreen extends react.component { static navigationoptions = { title: 'about us', }; render() { return ( <view style={styles.main}> <text></text> </view>); } }
[same other page titles]
class homescreen extends react.component { render() { const { navigate } = this.props.navigation; return ( <view style={styles.main}> <actionbutton buttoncolor = "skyblue"> <actionbutton.item buttoncolor='#84ccc9' title = 'faq' onpress={() => navigate('faq')}> <icon name="ios-help-circle" style= {styles.actionbuttonicon} /> </actionbutton.item> <actionbutton.item buttoncolor='#5b4d90' title="aboutus" onpress={() => navigate('about')}> <icon name="ios-people" style={styles.actionbuttonicon} /> </actionbutton.item> <actionbutton.item buttoncolor='#37a3da' title = 'events' onpress={() => navigate('events')}> <icon name="ios-calendar" style={styles.actionbuttonicon} /> </actionbutton.item> <actionbutton.item buttoncolor='#91a1c9' title = 'home' onpress={() => navigate('home')}> <icon name="ios-home" style={styles.actionbuttonicon} /> </actionbutton.item> <actionbutton.item buttoncolor='#9b59b6' title="cinthy" onpress={() => navigate('chat')}> <icon name="md-create" style={styles.actionbuttonicon} /> </actionbutton.item> <actionbutton.item buttoncolor='#f6ba61' title="careerstats" onpress={() => navigate('stats')}> <icon name="ios-pie" style={styles.actionbuttonicon} /> </actionbutton.item> <actionbutton.item buttoncolor='#1abc9c' title="jobsearch" onpress={() => navigate('job')}>` <icon name="ios-search" style={styles.actionbuttonicon} /> </actionbutton.item> </actionbutton> </view> ); } } const simpleapp = stacknavigator({ home: { screen: homescreen, navigationoptions:{ title: 'welcome!', headerstyle:{ backgroundcolor: 'skyblue'}, headertitlestyle:{ color: 'black'}, } }, chat: { screen: chatscreen }, faq: {screen: faqscreen}, about: {screen: aboutscreen}, events: {screen: eventscreen}, stats:{screen: careerscreen}, job: {screen: jobsearchscreen} }); const styles = stylesheet.create({ main:{ flex:1, backgroundcolor: '#f3f3f3' }, actionbuttonicon: { fontsize: 20, height: 22, color: 'white', }, }); export default simpleapp
Comments
Post a Comment