如何在react-native的react导航中制作下拉菜单？
我想在导航栏中制作下拉菜单，就像WhatsApp一样。一些下拉菜单在导航栏内，另一些在导航栏外。下拉菜单项的按钮不会触发外部导航栏，这是问题所在。
使用React导航，我为导航设置了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>
)}
}
}然后，我通过包含下拉菜单的子级导航navigationOption来放置<DropdownMenu/>。
ChildTabNav.navigationOptions = ({ navigation }) => {
const { routeName } = navigation.state.routes[navigation.state.index];
const headerTitle = routeName;
return {
headerTitle,
headerRight: (
<DropdownMenu/>
)
};
};这几乎是我所期望的工作。下拉列表显示正确。当我按下导航栏区域的下拉菜单项时，它是work。其他按钮在导航栏外的上方，它的按钮不起作用。此外，如果在菜单项按钮下面有任何按钮，则会触发该按钮下面的按钮是否在视觉上被菜单项覆盖。我希望按钮是工作的内部或外部的导航栏。
回答 1
Stack Overflow用户
发布于 2019-02-14 22:07:07
你可能想用UIManager，它是这样的(Pritish‘s 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中起作用，你不会在点击外部和/或点击项目时遇到问题。
https://stackoverflow.com/questions/54691368
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号