Cassetto di navigazione in React-Native

Question

Sono un principiante in react-native, non importa se faccio una domanda di base, volevo sapere, qual è la procedura passo passo per implementare il cassetto di navigazione.

collegamenti di cui this Link

io non sono in grado di integrarlo.

Anche qualsiasi cassetto di implementazione del progetto Demo funzionerà. Qualsiasi aiuto per quanto riguarda questo sarà grande.

Grazie

Answer 1

Attuazione del riquadro di navigazione a reagire nativo come segue:

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

In primo luogo, è necessario installare il pacchetto reagire-navigazione: NPM installare --save reagire-navigazione
Per rendere più facile e più comodo, ho messo ogni linee di codici e commenti nel mio App.js file di

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