react native中的全球汉堡包菜单

// Router.js - the main point of entry for the project

import React, { Component } from 'react';
import {DrawerNavigator} from 'react-navigation';

import Contact from './Contact';

// Router
let Router = 
{
  Contact:{screen:Contact},
}

const Navigator = DrawerNavigator(Router);
export default Navigator;

这是我的联系人。js公司

// Contact.js
import React, { Component } from 'react';
import {StackNavigator} from 'react-navigation';
import MenuToggle from './MenuToggle';

class Contact extends Component {
  static navigationOptions = {title:"Contact",drawLabel:"Contact"};

  render() {
    return (
      <MenuToggle navigate={this.props.navigation.navigate}/>
    );
  }
}
let Router = 
{
    Contact:{screen:Contact}
}

const Navigator = StackNavigator(Router);
export default Navigator;

这是我的菜单切换。js公司

// MenuToggle.js
import React, { Component } from 'react';

import {
  View,
  TouchableHighlight
} from 'react-native';


export default class MenuToggle extends Component {

    constructor(props)
    {
        super(props);
    }


  render() {
    const style1 =  {
    backgroundColor:'yellow',
    width:40,
    height:40,
    zIndex:20,
    position:'absolute', // comment out this line to see the menu toggle
    top:5,
    right:-80,
    };
    const style2 = {
        backgroundColor:'yellow',
    }
    return (
          <TouchableHighlight
            onPress={() => this.props.navigate('DrawerOpen')} style={style1}>
            <View style={style2}></View>
          </TouchableHighlight>
    );
  }
}

我的菜单切换。js从未出现在联系人屏幕中。然而,如果我发表评论 position:absolute ,然后它将出现在我的标题下方,左侧稍有一点。但我需要它出现在屏幕的右上角,覆盖在标题的顶部。

如何让这个汉堡包菜单出现在右上角的所有屏幕上?