반응성 네이티브의 글로벌 햄버거 메뉴

모든 화면에서 내 서랍 네비게이터를 토글하는 햄버거 메뉴 역할을하는 요소를 구현하려고합니다. 그러나 내 햄버거 메뉴 (일명 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을 주석 처리하면 내 머리글 아래에 왼쪽에 약간 표시됩니다. 하지만 헤더 상단에 겹쳐진 화면의 오른쪽 상단에 나타나야합니다.

이 햄버거 메뉴를 오른쪽 상단의 모든 화면에 표시하려면 어떻게해야합니까?

출처

2017-12-01 John

TouchableHighlight을보기로 감싸고 style1을 해당보기에 적용하면 어떨까요? –

@coderhacker 감사합니다.하지만 같은 문제가 발생했습니다. 위치 절대 값에 대한 어떤 점은보기가 나타나지 않도록합니다. – John

한 가지 더. 나는 TouchableHighlight와 정렬 문제가있었습니다. 올바른 것은 아니지만 TouchableWithoutFeedback을 사용하여 TouchableHighlight에서 문제가 발생했는지 확인하고 앞으로 나아갈 수 있습니다. –

버그를 발견했습니다. 나는 실수로 요소를 보이지 않게 만드는 right:-80을 설정했습니다. 나는 그것을 right:80으로 만든 다음 메뉴 항목을 볼 수있게되었습니다.

출처

2017-12-03 14:51:52 John

반응성 네이티브의 글로벌 햄버거 메뉴

답변

관련 문제