Cajón de navegación en React-Native

Implementación del cajón de navegación en reaccionar de la siguiente manera:

Index.ios.js

'use strict'; import React, { AppRegistry } from 'react-native'; import App from './components/App'; AppRegistry.registerComponent('ReactNativeProject', () => App); 

App.js :

 'use strict' import React, { Component } from 'react'; import { DeviceEventEmitter, Navigator, Text, TouchableOpacity, View } from 'react-native'; import Drawer from 'react-native-drawer'; import Icon from 'react-native-vector-icons/MaterialIcons'; import { EventEmitter } from 'fbemitter'; import Menu from './Menu'; import HomePage from './HomePage' import ProfilePage from './ProfilePage' import navigationHelper from '../helpers/navigation'; import styles from '../styles/root'; let _emitter = new EventEmitter(); class App extends Component { componentDidMount() { var self = this; _emitter.addListener('openMenu', () => { self._drawer.open(); }); _emitter.addListener('back', () => { self._navigator.pop(); }); } render() { return ( <Drawer ref={(ref) => this._drawer = ref} type="overlay" content={<Menu navigate={(route) => { this._navigator.push(navigationHelper(route)); this._drawer.close() }}/>} tapToClose={true} openDrawerOffset={0.2} panCloseMask={0.2} closedDrawerOffset={-3} styles={{ drawer: {shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3}, main: {paddingLeft: 3} }} tweenHandler={(ratio) => ({ main: { opacity:(2-ratio)/2 } })}> <Navigator ref={(ref) => this._navigator = ref} configureScene={(route) => Navigator.SceneConfigs.FloatFromLeft} initialRoute={{ id: 'HomePage', title: 'HomePage', index: 0 }} renderScene={(route, navigator) => this._renderScene(route, navigator)} navigationBar={ <Navigator.NavigationBar style={styles.navBar} routeMapper={NavigationBarRouteMapper} /> } /> </Drawer> ); } _renderScene(route, navigator) { switch (route.id) { case 'HomePage': return ( <HomePage navigator={navigator}/> ); case 'ProfilePage': return ( <ProfilePage navigator={navigator}/> ); } } } const NavigationBarRouteMapper = { LeftButton(route, navigator, index, navState) { switch (route.id) { case 'HomePage': return ( <TouchableOpacity style={styles.navBarLeftButton} onPress={() => {_emitter.emit('openMenu')}}> <Icon name='menu' size={25} color={'white'} /> </TouchableOpacity> ) default: return ( <TouchableOpacity style={styles.navBarLeftButton} onPress={() => {_emitter.emit('back')}}> <Icon name='chevron-left' size={25} color={'white'} /> </TouchableOpacity> ) } }, RightButton(route, navigator, index, navState) { return ( <TouchableOpacity style={styles.navBarRightButton}> <Icon name='more-vert' size={25} color={'white'} /> </TouchableOpacity> ) }, Title(route, navigator, index, navState) { return ( <Text style={[styles.navBarText, styles.navBarTitleText]}> {route.title} </Text> ) } } export default App; 

Menu.js

 import React, { Component } from 'react'; import { ListView } from 'react-native'; import Button from 'react-native-button'; import styles from '../styles/menu' var _navigate; class Menu extends Component { constructor(props) { super(props); this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 }) }; _navigate = this.props.navigate; } componentDidMount() { this.setState({ dataSource: this.state.dataSource.cloneWithRows(['HomePage', 'ProfilePage']) }); } _renderMenuItem(item) { return( <Button style={styles.menuItem} onPress={()=> this._onItemSelect(item)}>{item}</Button> ); } _onItemSelect(item) { _navigate(item); } render() { return ( <ListView style={styles.container} dataSource={this.state.dataSource} renderRow={(item) => this._renderMenuItem(item)} /> ); } } module.exports = Menu; 

ProfilePage.js

 import React, { Component } from 'react'; import { View, Text } from 'react-native'; import styles from '../styles/home' class ProfilePage extends Component { render(){ return ( <View style={styles.container}> <Text>Profile Page</Text> </View> ); } } module.exports = ProfilePage; 

HomePage.js

 import React, { Component } from 'react'; import { View, Text } from 'react-native'; import styles from '../styles/home' class HomePage extends Component { render(){ return ( <View style={styles.container}> <Text>Home Page</Text> </View> ); } } module.exports = HomePage; 

Navigation.js

 import React, { Platform } from 'react-native'; import _ from 'underscore'; module.exports = function (scene) { var componentMap = { 'HomePage': { title: 'HomePage', id: 'HomePage' }, 'ProfilePage': { title: 'ProfilePage', id: 'ProfilePage' } } return componentMap[scene]; }