グローバルネイティブのハンバーガーメニュー

Question

ハンバーガーメニューとして機能し、すべての画面から引き出しナビゲータを切り替える要素を実装しようとしています。しかし、私のハンバーガーメニュー（別名MenuToggle）は私のどのインターフェースにも表示されません。

// 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決してショーがされています。ここでは、問題を再現できる3つのファイルがあります連絡先画面に表示されます。しかし、私がposition:absoluteをコメントアウトすると、それは私のヘッダーの下に表示され、少し左に表示されます。しかし、ヘッダーの上に重なる画面の右上に表示する必要があります。

このハンバーガーメニューを右上のすべての画面に表示するにはどうすればよいですか？

Answer 1

このバグが見つかりました。私は間違って要素を表示しないようにright:-80を設定しました。私はそれをright:80にしてから、メニュー項目が見えるようになりました。