react-native 中的全球汉堡菜单

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;

现在这是我的 contact.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，那么它会出现在我的 header 下方和左侧一点。但我需要它出现在屏幕的右上角，覆盖在 header 之上。

如何让这个汉堡包菜单显示在右上角的所有屏幕上？

Answer 1

我发现了这个错误。我不小心设置了 right:-80 使元素不可见。我做到了 right:80 然后菜单项就可见了。

react-native 中的全球汉堡菜单

global hamburger menu in react-native

react-native

menu

navigation-drawer

stack-navigator