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

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m
Read more

javascript - Z-index in d3.js -

i have map , when hover effect on region of map below yellow line , circle, last ones disappear. how can solve problem? http://jsfiddle.net/ot21n9qx/ var arc = g.append("path") .style("fill", "none") .style("stroke", "yellow") .style("stroke-width", 2) .attr("d", "m" + pathorigin[0] + "," + pathorigin[1] + " q" + svgpoint[0] + "," + pathorigin[1] + " " + svgpoint[0] + "," + svgpoint[1]); var circlesize = d3.scale.linear() .domain([0, 0.5, 1]) .range([4, 10, 4]); svg not have z order draws objects in order created. need create path , circle after create highlight regions. here forked fiddle: http://jsfiddle.net/o00fzgaf/1/
Read more