如何设置反应本机导航标题菜单？

Question

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在导航标题中显示菜单，但是仅该菜单显示标题区域中的问题不能显示完整菜单

我如何在屏幕上制作此类菜单。

Answer 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>
        )
    }

    
}

在标题中导入类