全球汉堡菜单中的反应本地菜单

Question

我正在尝试实现一个元素，该元素将充当汉堡菜单，以从所有屏幕上切换我的抽屉导航器。但是，我的汉堡菜单（又名Menutoggle）都不会出现在我的任何界面中。这是3个可以重现问题的文件：

// 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;

这是我的menutoggle.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>
    );
  }
}

我的menutoggle.js从未出现在触点屏幕上。但是，如果我发表评论position:absolute，那么它将出现在我的标头下方，左侧有一点。但是我需要它出现在屏幕右上角，覆盖在标头顶。

如何使此汉堡菜单出现在右上角的所有屏幕上？

Answer 1

我找到了错误。我不小心设置了right:-80，使该元素无法视为。我做了right:80，然后菜单项变得可见。