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注释掉，那么它会显示在我标题的下方和左侧的一点点。但我需要它出现在屏幕的右上方，覆盖在标题的顶部。

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

Answer 1

我发现了这个错误。我不小心设置right:-80使元素不在视野范围内。我把它right:80，然后菜单项变得可见。

反应原生的全球汉堡包菜单

1 个答案: