在React-Native中的导航抽屉

我是一个反应原生的新手，不介意如果我问一个基本的问题，我想知道，什么是一步一步的程序来实现导航抽屉。

推荐链接此链接

我无法整合它。

任何实施抽屉的演示项目也将工作。 任何有关这方面的帮助将是伟大的。

谢谢

Answer 1

导航抽屉在原生中的实现如下：

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]; } 

Answer 2

首先，你需要安装react-navigation软件包： npm install –save react-navigation
为了使它更轻松，更舒适，我把每行代码和注释放在我的App.js文件中

 import React, { Component } from 'react'; import { Text, View, StyleSheet } from 'react-native'; import { DrawerNavigator } from 'react-navigation'; // Create HomeScreen class. When 'Home' item is clicked, it will navigate to this page class HomeScreen extends Component { render() { return <Text> Home Page </Text> } } // Create ProfileScreen class. When 'Profile' item is clicked, it will navigate to this page class ProfileScreen extends Component { render() { return <Text> Profile Page </Text> } } // Create SettingsScreen class. When 'Settings' item is clicked, it will navigate to this page class SettingsScreen extends Component { render() { return <Text> Settings Page </Text> } } const RootNavigation = DrawerNavigator({ Home: { screen: HomeScreen }, Profile: { screen: ProfileScreen}, Settings: { screen: SettingsScreen} }); export default class App extends Component { render() { return <RootNavigation /> } } 

这是我的演示