Alten react-native Code anpassen

Question

Ich bin sehr neu mit reagieren native. Ich habe versucht, ein Schieberegler-Menü mit dem react-native-navigation-drawer Modul zu erstellen. Ich folgte dem Beispiel. Ich hatte Fehler mit ihrem Code:

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
} = React; 

var SlideMenu = require('react-native-navigation-drawer'); 
var Menu = require('./menu.js'); 

var Pages = require('./pages.js'); 
var FirstPage = Pages.FirstPage; 
var SecondPage = Pages.SecondPage; 
var ThirdPage = Pages.ThirdPage; 

var BasicExample = React.createClass({ 
    getInitialState(fragmentId) { 
    return ({ route: 'firstpage' }); 
    }, 

    updateFrontView() { 
    switch (this.state.route) { 
     case 'firstpage': 
     return <FirstPage />; 
     case 'secondpage': 
     return <SecondPage />; 
     case 'thirdpage': 
     this.refs.slideMenu.blockSlideMenu(true); 
     return <ThirdPage routeFrontView={this.routeFrontView}/>; 
    } 
    }, 

    routeFrontView(fragmentId) { 
    //we unblock slideMenu when we change the route (it will be activated 
    //when the page is updated, look at 'thirdpage') 
    this.refs.slideMenu.blockSlideMenu(false); 
    this.setState({ route: fragmentId }); 
    }, 

    render() { 
    var fragment = this.updateFrontView(); 
    return (
     <View style={styles.container}> 
     <SlideMenu ref="slideMenu" frontView={fragment} 
      routeFrontView={this.routeFrontView} menu={<Menu />} 
      slideWay='left' moveFrontView={false} width={200}/> 
     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    }, 
}); 

AppRegistry.registerComponent('BasicExample',() => BasicExample); 

Ich habe versucht, sie zu beheben, indem Sie den Code auf diese eine Aktualisierung:

import React from 'react'; 
import { StyleSheet, Text, View } from 'react-native'; 
import { Provider } from 'react-redux' 
import'../I18n/I18n.js'; 
import RootContainer from './RootContainer' 
import createStore from '../Redux' 

// create store 
const store = createStore() 

var SlideMenu = require('react-native-navigation-drawer'); 
var Menu = require('./menu.js'); 
var Pages = require('./pages.js'); 
var FirstPage = Pages.FirstPage; 
var SecondPage = Pages.SecondPage; 

export default class App extends React.Component { 
    getInitialState(fragmentId) { 
    return ({ route: 'firstpage' }); 
    } 

    updateFrontView() { 
    switch (this.state.route) { 
     case 'firstpage': 
     return <FirstPage />; 
     case 'secondpage': 
     return <SecondPage />; 
    } 
    } 

    routeFrontView(fragmentId) { 
    this.setState({ route: fragmentId }); 
    } 

    render() { 
    var fragment = this.updateFrontView(); 
    return (
     <View style={styles.container}> 
     <SlideMenu frontView={fragment} routeFrontView={this.routeFrontView} 
      menu={<Menu />} slideWay='left' moveFrontView={false} width={200}/> 
     </View> 
    ); 
    } 
} 

Aber jetzt habe ich eine Störung erhalte, haben Sie eine Vorstellung über das Problem haben ?

[1]: https://github.com/ilansas/react-native-navigation-drawer/tree/master/examples/BasicExample 

Answer 1

Sie benötigen einen Standardstatus Weg zu Ihrer Seite hinzuzufügen.

import React from 'react'; 
import { StyleSheet, Text, View } from 'react-native'; 
import { Provider } from 'react-redux' 
import'../I18n/I18n.js'; 
import RootContainer from './RootContainer' 
import createStore from '../Redux' 

// create store 
const store = createStore() 

var SlideMenu = require('react-native-navigation-drawer'); 
var Menu = require('./menu.js'); 
var Pages = require('./pages.js'); 
var FirstPage = Pages.FirstPage; 
var SecondPage = Pages.SecondPage; 

export default class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     route: 'firstpage' 
    }; 
    } 

    getInitialState(fragmentId) { 
    return ({ route: 'firstpage' }); 
    } 

    updateFrontView() { 
    switch (this.state.route) { 
     case 'firstpage': 
     return <FirstPage />; 
     case 'secondpage': 
     return <SecondPage />; 
    } 
    } 

    routeFrontView(fragmentId) { 
    this.setState({ route: fragmentId }); 
    } 

    render() { 
    var fragment = this.updateFrontView(); 
    return (
     <View style={styles.container}> 
     <SlideMenu frontView={fragment} routeFrontView={this.routeFrontView} 
      menu={<Menu />} slideWay='left' moveFrontView={false} width={200}/> 
     </View> 
    ); 
    }