如何在React-Native中的React-Navigation中进行下拉菜单

Question

我想像whatsapp一样在导航栏中进行下拉菜单。一些下拉菜单在导航栏内，有些则在外面。下拉菜单项的按钮将不会触发外部导航栏，这是问题。

使用React-Navigation，我将navigationOption设置为导航，该导航将包含其子女的下拉菜单，即标签导航栏，因为我想要Tabs Navigation Bar blower ballow，就像WhatsApp一样。我还放置了将涵盖整个应用程序的透明TouchableHiglight。因此，如果我按除菜单按钮以外的任何地方，它将隐藏下拉菜单。就像WhatsApp一样。这是我的反应应用程序的代码：

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/>
    )
  };
};

这几乎是我所期望的。下拉列表显示正确。当我在导航栏区域按下拉菜单项时，这是工作。其他按钮在导航栏的外面，IT按钮不起作用。此外，如果有任何按钮波纹菜单项按钮，无论菜单项在视觉上涵盖了按钮，它都会触发按钮吼叫。我希望该按钮在导航栏内部或外部工作。

Answer 1

您可能想与UIManager一起使用，它是这样的（Pritish Vaidya的答案）

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中起作用，您将不会单击外部和单击项目。