ナビゲーション・ドロワーinリアクト・ネイティブ

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

まず、あなたが反応し、ナビゲーションパッケージをインストールする必要があります。--saveが反応し、ナビゲーション
を、それが簡単に、より快適にするために NPMをインストールし、私は私のにコードとコメントのすべての行を置きます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