React-Native-Popup-Menu and Stack Navigator

Question

ReactNavigation Stack Navigator has the HeaderRight property. It is useful to put the menu button in the header, but it does not have a context menu.

Is it possible to integrate the "Real start popup menu" into the "Stack Overlay"?

Thanks in advance.

Answer 1

I installed navigationOptions StackNavigator, setting my custom button as RightHeader

  static navigationOptions = ({ navigation }) => ({
title: `${navigation.state.params.Name}`,
headerRight: (
      <ContextMenuButton
      />)

I would like to know if it is possible to use the React Native Popup Menu, display and use it in combination with headerRight

Answer 2

It is definitely possible. In the root application, do the following:

import React, { Component } from 'react';
import { MenuContext } from 'react-native-popup-menu';
import MainNavigator from './components/MainNavigator';

export default class App extends Component {
  render() {
    return (
      <MenuContext>
        <MainNavigator />
      </MenuContext>
    );
  }
}

, headerRight, .

Answer 3

, : , Menu, MenuTrigger. MenuTrigger, .

: , Menu navigationOptions :

static navigationOptions = ({navigation}) => ({
  title: 'Uploaded Videos',
  drawerLockMode: 'locked-closed',
  headerRight: 
    <Menu renderer={SlideInMenu} style={{ zIndex: 10 }}>
      <MenuTrigger text="open menu"/>
      <MenuOptions style={{ flex: 1 }}>
        <Text>Menu</Text>
        <MenuOption onSelect={() => { console.log("clicked") text="Click me" />
      </MenuOptions>
    </Menu>

Caveat: navigationOptions , . , . - . , , , .

, !