如何在 react-native 中的 react-navigation 中制作下拉菜单？

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，它是这样的（Pritish Vaidya 的 answer）

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，您不会遇到点击外部或点击项目的问题。