Как сделать выпадающее меню в реагировать на навигацию в реагировать на родной?

Question

Я хочу сделать выпадающее меню внутри панели навигации, как в WhatsApp.Некоторые из выпадающих меню находятся внутри панели навигации, другие - снаружи.Кнопка выпадающего меню, которая не будет вызываться вне панели навигации, что является проблемой.

Используя React-Navigation, я установил navigationOption для навигации, которая будет содержать раскрывающееся меню от его дочернего элемента, то есть навигации по вкладкам.панель, так как я хочу вкладки под панелью навигации, как в WhatsApp.Я также поставил прозрачный TouchableHiglight, который будет охватывать все приложение.Так что, если я нажму где-нибудь, кроме кнопки меню, это будет скрывать раскрывающиеся меню.Так же, как WhatsApp.Это код моего приложения React-Native:

class DropdownMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isHide: true
    }
  }

  render() {
  if (this.state.isHide) {
    return ( 

      //display menu icon

      <TouchableHighlight onPress={()=>this.setState({isHide: false})}>  
        <Image source={require("./ic-menu.png")} />
      </TouchableHighlight>
    )}else{
    return ( 

      //show menu items

      <View style={styles.coverPage}>  
        <TouchableHighlight style={styles.coverPage} onPress={()=>this.setState({isHide: true})}><View></View></TouchableHighlight>

        <TouchableHighlight><Text>Members</Text></TouchableHighlight>
        <TouchableHighlight><Text>Settings</Text></TouchableHighlight>
      </View>
    )}
  }
}

Затем я поставил <DropdownMenu/> через дочернюю навигационную опцию навигации, которая будет содержать выпадающее меню.

ChildTabNav.navigationOptions = ({ navigation }) => {
  const { routeName } = navigation.state.routes[navigation.state.index];
  const headerTitle = routeName;

  return {
    headerTitle,
    headerRight: (
       <DropdownMenu/>
    )
  };
};

Это почти работает, как я ожидаю.Раскрывающийся список показал правильно.Когда я нажимаю пункт выпадающего меню в области панели навигации, это работает.Другая кнопка находится за пределами панели навигации, и она не работает.Более того, если есть какая-либо кнопка под кнопкой пункта меню, она будет активировать кнопку под ней, независимо от того, будет ли кнопка визуально закрыта элементом меню.Я хочу, чтобы кнопка работала как внутри, так и снаружи навигационной панели.

Answer 1

Возможно, вы захотите пойти с UIManager, это выглядит примерно так ( ответ Притиш Вайдья )

import { UIManager, findNodeHandle } from 'react-native';

class Menu extends Component {
iconRef = createRef();

onError = () => {
   console.log()'
}

openMenu = () => {
  UIManager.showPopupMenu(
    findNodeHandle(this.iconRef),
    ['action1', 'action2', 'action3'],
    this.onError,
    this.props.onPress);
}

render () {
   return(
       <Icon ref={this.iconRef} onPress={this.openMenu} />
   )
}

Но это будет работать только в Android, и у вас не будет проблемс кликом снаружи и или кликом по элементам.