0

我正在尝试实现一个元素，该元素将充当汉堡菜单，以从所有屏幕切换我的抽屉导航器。但是，我的汉堡菜单（又名 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，那么它会出现在我的标题下方和左侧一点。但我需要它出现在覆盖在标题顶部的屏幕右上角。

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

4

1 回答 1

0

我发现了这个错误。我不小心设置了right:-80制作元素的视野。我做到了right:80，然后菜单项变得可见。

于 2017-12-03T14:51:52.933 回答