네비게이션 드로어 (네이티브)

Question

나는 초보자입니다. 기본 질문을한다면, 알고 싶습니다. 네비게이션 서랍을 구현하는 단계별 절차는 무엇입니까?

참조 된 링크 this Link

나는 그것을 통합 할 수 없습니다입니다.

서랍을 구현하는 데모 프로젝트도 가능합니다. 이것에 관한 도움이 될 것입니다.

감사합니다

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

첫째, 당신은 반응 네비게이션 패키지를 설치해야합니다 NPM 반응 네비게이션을 --save
을보다 쉽고 편안하게 설치, 내 에서 코드와 주석의 모든 라인을 넣어 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 /> 
    } 
} 

Here is my demo