globales Hamburgermenü in reaktionseigenem

Question

Ich versuche, ein Element zu implementieren, das als ein Hamburgermenü fungiert, um meinen Schubladennavigator von allen Bildschirmen umzuschalten. Mein Hamburgermenü (auch MenuToggle genannt) wird jedoch in keiner meiner Schnittstellen angezeigt. Hier sind 3 Dateien, die das Problem reproduzieren können:

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

Jetzt ist hier mein 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; 

Und hier ist mein 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> 
    ); 
    } 
} 

Meine MenuToggle.js nie Shows im Kontaktbildschirm. Wenn ich jedoch position:absolute auskommentieren, dann wird es unter meinem Header und ein wenig auf der linken Seite erscheinen. Aber ich brauche es oben rechts auf dem Bildschirm, der über der Kopfzeile liegt.

Wie bekomme ich dieses Hamburgermenü auf allen Bildschirmen oben rechts angezeigt?

Answer 1

Ich habe den Fehler gefunden. Ich habe versehentlich die right:-80 setzen das Element aus dem Blickfeld. Ich machte es right:80 und dann wurde der Menüpunkt sichtbar.