改编旧的 react-native 代码

Question

我对 react native 很陌生。我试图用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>
    );
  }