适应旧的反应原生代码

Question

我对反应原生很新。我正在尝试使用react-native-navigation-drawer模块创建滑动菜单。我正在参加考试。我曾与他们的代码中的错误：

'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); 

我试图通过代码更新到这一个来解决这些问题：

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

但现在我得到一个错误，你有关于这个问题的想法？

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

Answer 1

您需要将默认状态路由添加到您的网页。

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