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/>通过子菜单的navigationOption中的导航选项放入，其中包含下拉菜单。

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，并且您不会遇到单击外部和/或单击项的问题。

如何在react-native的react-navigation中创建下拉菜单？

1 个答案: