如何在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，您在外部点击或点击项目时没有问题。