在React Native中单击汉堡包图标后DrawerLayout不显示菜单

Question

我创建了一个应用程序，我想在登录后在每个页面上显示菜单栏。通过使用“ react-native-action-bar”和“ react-native-drawer-layout”，我创建了菜单栏，并且它在登录之前可以正常工作。但是登录后它没有显示菜单项。我没有弄错地方。

您能帮我解决这个问题吗？

App.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet
} from 'react-native';
import RNFetchBlob from 'rn-fetch-blob';
import Form from './src/components/Form';
import DeleteImages from './src/components/DeleteImages';
import CreateAppFolder from './src/components/CreateAppFolder';

    export default class App extends Component {
      render() {
        return (
           <Form/>
        );
      }
    }

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

Form.js，

import React, {Component} from 'react';
import {View} from 'react-native';
import SecondScreen from './SecondScreen';

export default class Form extends React.Component {

  constructor(props){
          super(props);
          this.state = {
              isLoggedIn: true,
          }
      }

  render() {
    return (
      <View>
        {this.state.isLoggedIn ?
          <SecondScreen longitude = {this.state.currentLongitude} latitude = {this.state.currentLatitude} userJsonData={this.state.userJsonData} />
          :
          //set of codes
          :
           //set of codes
          }
        </View>
    );
  }
}

SecondScreen.js

import React, {Component} from 'react';
import {View} from 'react-native';
import MenuBar from './MenuBar';

export default class Form extends React.Component {
    //other set of code

      render() {
        return (
              <MenuBar/>
              // other set of code
            );
          }
        }
    }

MenuBar.js，

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, View } from 'react-native';
import ActionBar from 'react-native-action-bar';
import DrawerLayout from 'react-native-drawer-layout';

import Menu from './Menu';

export default class MenuBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      drawerClosed: true,
      pageTitle:'Home-page'
    };
    this.toggleDrawer = this.toggleDrawer.bind(this);
    this.setDrawerState = this.setDrawerState.bind(this);
  }

  setDrawerState() {
    this.setState({
      drawerClosed: !this.state.drawerClosed,
    });
  }

  toggleDrawer = () => {
    if (this.state.drawerClosed) {
      this.DRAWER.openDrawer();
    } else {
      this.DRAWER.closeDrawer();
    }
  }

  render() {
    return (
      <DrawerLayout
        drawerWidth={300}
        ref={drawerElement => {
          this.DRAWER = drawerElement;
        }}
        drawerPosition={DrawerLayout.positions.left}
        onDrawerOpen={this.setDrawerState}
        onDrawerClose={this.setDrawerState}
        renderNavigationView={() => <Menu/>}
      >
        <ActionBar
          title={this.state.pageTitle}
          containerStyle={styles.bar}
          backgroundColor="#95A5A6"
          leftIconName={'menu'}
          onLeftPress={this.toggleDrawer}/>
      </DrawerLayout>
    );
  }
}

const styles = StyleSheet.create({
  screen: {
    backgroundColor: '#95A5A6',
    flex: 1,
    paddingTop: 10,
    alignItems: 'center',
    //padding: 10
  },
});

Menu.js，

import React, { Component } from 'react';
import { View,Text,StyleSheet,ScrollView,TouchableOpacity } from 'react-native';
export default class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {
       menuItems :['Institutes','Schools','Teachers','Students','Favorites','Switch Role']
    };
  }
  showPage = (selected) =>{
    switch(selected) {
      case 0:

        alert(this.state.menuItems[selected]);
        break;

      case 1:
        alert(this.state.menuItems[selected]);
        break;

      case 2:
        alert(this.state.menuItems[selected]);
        break;

      case 3:
        alert(this.state.menuItems[selected]);
        break;

      case 4:
        alert(this.state.menuItems[selected]);
        break;

      case 5:
        alert(this.state.menuItems[selected]);
        break;

      default:

      }
  }
  render() {
    return (
      <View style={styles.wrapper}>
       <TouchableOpacity><Text style={styles.listMenu}></Text></TouchableOpacity> 
        {this.state.menuItems.map((item,key) => (
          <TouchableOpacity onPress={() => this.showPage(key)} ><Text style={styles.listMenu}>{item}</Text></TouchableOpacity>
        ))}
      </View>
    );
  }
}
const styles = StyleSheet.create({
  wrapper: {
    backgroundColor: '#95A5A6',
    height:"100%"
  },

  listMenu: {
    color: 'white', 
    fontSize: 16, 
    paddingLeft: 20, 
    paddingTop: 5,
    paddingBottom: 5,
  }

});