如何设置反应原生导航标题菜单？答案

【问题标题】：How to set react native navigation header menu?如何设置反应原生导航标题菜单？
【发布时间】：2018-07-27 06:09:12
【问题描述】：

static navigationOptions = ({navigation}) => {
    return {
        headerTitle :<View style={{flex:1, flexDirection:'row', justifyContent:'center'}}>
            <Image source={require('../assets/logo.png')} style={{width: 50, height: 50, alignSelf:'center'}} resizeMode='contain'/>
        </View>,
        headerStyle: {
            backgroundColor: '#2c8ba6',
        },
        headerRight: <TopNavigation />,
        headerLeft: null

    };
};

const TopNavigation = () => (

    <MenuContext>
        <Menu onSelect={(value) => alert(`User selected the number ${value}`)}>
            <MenuTrigger>
                <View style={{paddingHorizontal:16, height: '100%', alignItems:'center', justifyContent: 'center'}}>
                    <Image source={require('../assets/Icons/option_ic.png')} style={{width: 20, height: 20, alignSelf:'center'}} resizeMode='contain'/>
                </View>
            </MenuTrigger>
            <MenuOptions>
                <MenuOption value={1}>
                    <Text>One</Text>
                </MenuOption>
                <MenuOption value={2}>
                    <Text>Two</Text>
                </MenuOption>
            </MenuOptions>
        </Menu>
    </MenuContext>

);

我将使用 react-native-menu 在导航标题中显示菜单，但该菜单仅显示标题区域的问题，不显示完整菜单

我怎样才能在我的屏幕上制作这种类型的菜单。

【问题讨论】：

但该菜单仅显示标题区域中的问题，不显示完整菜单：这是什么意思
配偶标头区域高度为50所以菜单只显示50高度区域
能否也附上截图
您是说抽屉导航吗？ reactnavigation.org/docs/en/drawer-based-navigation.html

标签： react-native react-router react-navigation

【解决方案1】：

在标题菜单中使用“react-native-material-menu”

import Menu, {MenuItem} from "react-native-material-menu";

import React from "react";
import Menu, {MenuItem} from "react-native-material-menu";
import {AsyncStorage, Image, Share, TouchableOpacity} from "react-native";

export default class TopNavigation extends React.Component<props> {

    _menu = null;

    setMenuRef = ref => {
        this._menu = ref;
    };

    hideMenu = () => {
        this._menu.hide();
    };

    showMenu = () => {
        this._menu.show();
    };

    render() {
        return (
            <Menu
                ref={(ref) => this._menu = ref}
                button={<TouchableOpacity onPress={() => this._menu.show()} style={{paddingHorizontal:16, height: '100%', alignItems:'center', justifyContent: 'center'}}><Image source={require('../assets/Icons/option_ic.png')} style={{width: 20, height: 20, alignSelf:'center'}} resizeMode='contain'/></TouchableOpacity>}
            >
                <MenuItem onPress={() => this.hideMenu()} textStyle={{color: '#000', fontSize: 16}}>Share App</MenuItem>
                <MenuItem textStyle={{color: '#000', fontSize: 16}}>Rate App</MenuItem>
                <MenuItem textStyle={{color: '#000', fontSize: 16}}>Invite Friends</MenuItem>
                <MenuItem onPress={() => this.LogoutUser()}  textStyle={{color: '#000', fontSize: 16}}>Logout</MenuItem>
            </Menu>
        )
    }

    
}

在标题中导入类

【讨论】：