navigation - React native beginner -
i´m beginner using react , start little app study, i´m little lost in how things using react native. app use sidebar (i made using react-native-side-menu), did not understanding how navigate between screens using this. me this?
here url code @ bitbucket https://bitbucket.org/webdesignerivj/my-react/src
app.js
import react 'react'; import { appregistry, stylesheet, navigator, } 'react-native'; import { drawernavigator, } 'react-navigation'; //import sidemenu 'react-native-side-menu'; import styles './styles.js'; import homescreen './homescreen'; import perfilscreen './perfil'; import sidebar './sidebarmenu'; const navigation = drawernavigator({ home: { screen: homescreen, }, perfil: { screen: perfilscreen, }, }); navigation.navigationoptions = { title: 'menu' }; export default navigation; appregistry.registercomponent('myfirsapp', () => navigation);perfil.js
import react 'react'; import { appregistry, stylesheet, statusbar, button, text, view, image, touchablehighlight } 'react-native'; import sidebar './sidebarmenu'; export default class perfil extends react.component { static navigationoptions = { title: 'perfil', } toggle() { isopen: this.setstate({ isopen: !this.state.isopen, }); } updatemenustate(isopen) { this.setstate({ isopen }); } onmenuitemselected = item => { this.setstate( isopen: false, selecteditem: item, ); this.props.navigator.replace({id: item}); } render() { const { navigate } = this.props.navigation; const menu = <sidebar onitemselected={this.onmenuitemselected} navigator={this.props.navigation} />; let iconemenu = null; if (this.state.isopen) { iconemenu = require('./assets/img/close.png'); } else { iconemenu = require('./assets/img/menu.png'); } return ( <sidemenu menu={menu} isopen={this.state.isopen} menuposition='right' onchange={isopen => this.updatemenustate(isopen)}> <view style={styles.container}> <statusbar backgroundcolor='#205081' /> <view> <view style={[styles.box,styles.boxmenu]}> <image source={require('./assets/img/golfinho.png')} style={{width: 32, height: 32}} /> <text style={styles.welcome}>Área aluno 2.0</text> <touchableopacity onpress={this.toggle} style={styles.menubar}> <image source={iconemenu} style={{width: 32, height: 32}} /> </touchableopacity> </view> <view style={styles.conteudocontainer}> </view> </view> </view> </sidemenu> ); } } const styles = stylesheet.create({ button: { position: 'absolute', top: 20, padding: 0, }, menu: { flex: 1, backgroundcolor: 'lightgray', height: 90, padding: 5, margin: 0 }, iconmenu: { flex: 1, width: 32, height: 32, color: 'black', }, welcome: { fontsize: 32, textalign: 'center', fontweight: 'bold', margin: 10, padding: 20, backgroundcolor: 'darkgray', }, conteudocontainer: { flex: 2, backgroundcolor: 'white', alignitems: 'stretch', alignself: 'stretch', padding: 20, }, itemmenu: { flex: 1, borderwidth: 2, bordercolor: 'white', }, container: { flex: 1, backgroundcolor: '#ccc', alignitems: 'center', justifycontent: 'center', }, texto: { color: 'ivory', }, cabecalho1: { color: 'ivory', fontsize: 36, bordercolor: 'red' } });homescreen.js
import react 'react'; import { appregistry, stylesheet, statusbar, button, text, view, image, touchableopacity, dimensions } 'react-native'; import sidemenu 'react-native-side-menu'; import sidebar './sidebarmenu'; const dimensios = require('dimensions'); const window = dimensions.get('window'); export default class inicio extends react.component { constructor(props) { super(props); this.toggle = this.toggle.bind(this); this.state = { isopen: false, selecteditem: 'home', }; } static navigationoptions = { title: 'home', } toggle() { isopen: this.setstate({ isopen: !this.state.isopen, }); } updatemenustate(isopen) { this.setstate({ isopen }); } onmenuitemselected = item => { this.setstate( isopen: false, selecteditem: item, ); this.props.navigator.replace({id: item}); } render() { const { navigate } = this.props.navigation; const menu = <sidebar onitemselected={this.onmenuitemselected} navigator={this.props.navigation} />; //const menu = <sidebar onitemselected={ this.onmenuitemselected } />; let iconemenu = null; if (this.state.isopen) { iconemenu = require('./assets/img/close.png'); } else { iconemenu = require('./assets/img/menu.png'); } return ( <sidemenu menu={menu} isopen={this.state.isopen} menuposition='right' onchange={isopen => this.updatemenustate(isopen)}> <view style={styles.container}> <statusbar backgroundcolor='#205081' /> <view> <view style={[styles.box,styles.boxmenu]}> <image source={require('./assets/img/golfinho.png')} style={{width: 32, height: 32}} /> <text style={styles.welcome}>Área aluno 2.0</text> <touchableopacity onpress={this.toggle} style={styles.menubar}> <image source={iconemenu} style={{width: 32, height: 32}} /> </touchableopacity> </view> <view style={styles.conteudocontainer}> <view style={styles.maisutilizados}> <image source={require('./assets/img/notas.png')} style={styles.iconemaisutilizados} /> <text style={styles.textomaisutilizados}>notas</text> </view> <view style={styles.maisutilizados}> <image source={require('./assets/img/notas.png')} style={styles.iconemaisutilizados} /> <text style={styles.textomaisutilizados}>notas</text> </view> </view> </view> </view> </sidemenu> ); } } const styles = stylesheet.create({ button: { position: 'absolute', top: 20, padding: 0, }, box: { flex: -1, flexdirection: 'row', justifycontent: 'space-around', alignitems: 'flex-start', alignself: 'flex-start', backgroundcolor: 'white', width: window.width, height: 80, padding: 5 }, boxmenu: { backgroundcolor: '#205081', padding: 20, }, maisutilizados: { flex: -1, flexdirection: 'row', justifycontent: 'flex-start', alignitems: 'center', width: 128, height: 128, margin: 1, padding: 5, bordercolor: 'gray', borderwidth: 2, }, iconemaisutilizados: { width: 64, height: 64, borderwidth: 2, }, textomaisutilizados: { flex: 1, justifycontent: 'center', alignself: 'center', textalign: 'center', fontsize: 26, fontweight: 'bold', textalign: 'center', borderwidth: 2, }, conteudocontainer: { flex: 2, backgroundcolor: 'white', alignitems: 'stretch', alignself: 'stretch', padding: 20, }, btnnav: { backgroundcolor: 'red', width: window.width, padding: 5, margin: 2 }, btntexto: { color: 'white', fontsize: 16, padding: 0, alignitems: 'center', }, menu: { flex: 1, backgroundcolor: 'lightgray', height: 90, padding: 5, margin: 0 }, menubar: { width: 32, height: 32, top: 5, }, welcome: { fontsize: 16, textalign: 'center', fontweight: 'bold', color: 'white', top: 10, }, itemmenu: { flex: 1, borderwidth: 2, bordercolor: 'white', }, container: { flex: 0, backgroundcolor: '#205081', alignitems: 'flex-start', alignself: 'auto', justifycontent: 'flex-start', }, texto: { color: 'ivory', }, cabecalho1: { color: 'ivory', fontsize: 36, bordercolor: 'red' } });sidebarmenu.js
import react 'react'; import proptypes 'prop-types'; import { appregistry, stylesheet, statusbar, scrollview, button, navigator, text, view, image, touchablehighlight, dimensions } 'react-native'; import { draweritems, drawernavigator, withnavigation } 'react-navigation'; //const dimensions = require('dimensions'); const window = dimensions.get('window'); export default class sidebarmenu extends react.component { constructor(props) { super(props); } home() { this.props.navigation.navigate('home'); } perfil() { this.props.navigation.navigate('perfil'); } render() { return ( <scrollview scrollstotop={true} menuposition='right' style={styles.menu}> <view style={styles.menucontainer}> <statusbar backgroundcolor='#205081' /> <view style={styles.box}> <view> <text style={styles.welcome}>Área aluno{'\n'} <text style={[styles.welcome,styles.segundalinha]}>instituto vianna júnior</text> </text> </view> <touchablehighlight style={styles.btnnav} onpress={this.home} > <text style={styles.btntexto} ><image source={require('./assets/img/home.png')} style={{alignself: 'center',alignitems: 'center',}} /> home screen</text> </touchablehighlight> <touchablehighlight style={styles.btnnav} onpress={this.perfil} > <text style={styles.btntexto} ><image source={require('./assets/img/profile.png')} style={{alignself: 'center'}} /> perfil</text> </touchablehighlight> <touchablehighlight style={styles.btnnav} > <text style={styles.btntexto}>notas</text> </touchablehighlight> <touchablehighlight style={styles.btnnav} > <text style={styles.btntexto}>financeiro</text> </touchablehighlight> <touchablehighlight style={styles.btnnav} > <text style={styles.btntexto}>protocolo</text> </touchablehighlight> <touchablehighlight style={styles.btnnav} > <text style={styles.btntexto}>tarefas</text> </touchablehighlight> <touchablehighlight style={styles.btnnav} > <text style={styles.btntexto}>configuração</text> </touchablehighlight> <touchablehighlight style={styles.btnnav} > <text style={styles.btntexto}>contato</text> </touchablehighlight> </view> </view> </scrollview> ); }; } const styles = stylesheet.create({ button: { position: 'absolute', top: 20, padding: 0, }, box: { width: window.width, height: window.height, }, btnnav: { backgroundcolor: 'red', width: window.width, padding: 5, margin: 0 }, btntexto: { color: 'white', fontsize: 16, padding: 0, alignitems: 'center', }, menu: { flex: 1, width: window.width, height: window.height, backgroundcolor: 'gray', }, iconmenu: { flex: 1, width: 32, height: 32, color: 'black', }, welcome: { fontsize: 16, textalign: 'left', fontweight: 'bold', margin: 10, padding: 20, color: 'white', }, segundalinha: { fontsize: 12, fontweight: 'normal', }, itemmenu: { flex: 1, borderwidth: 2, bordercolor: 'white', }, menucontainer: { flex: 1, backgroundcolor: '#205081', alignitems: 'flex-start', justifycontent: 'flex-start', }, texto: { color: 'ivory', }, cabecalho1: { color: 'ivory', fontsize: 36, bordercolor: 'red' } }); sidebarmenu.proptypes = { onitemselected: proptypes.func.isrequired, };this code, , have mistakes.
Comments
Post a Comment