React-Native-Popup-Menu and Stack Navigator

Question

ReactNavigation Stack Navigator 具有属性 HeaderRight 属性，可用于将菜单按钮放置在标头中，但没有上下文菜单。

是否可以将 React Native 弹出菜单集成到堆栈导航器中？

提前谢谢。

Answer 1

绝对有可能完成。 在根应用程序中执行以下操作：

import React, { Component } from 'react';
import { MenuContext } from 'react-native-popup-menu';
import MainNavigator from './components/MainNavigator';
export default class App extends Component {
render() {
return (
<MenuContext>
<MainNavigator />
</MenuContext>
);
}
}

然后，您实现headerRight的方式应该可以完美运行。

Answer 2

我设置了StackNavigator的导航选项，将我的自定义按钮设置为RightHeader

static navigationOptions = ({ navigation }) => ({
title: `${navigation.state.params.Name}`,
headerRight: (
<ContextMenuButton
/>)

我想知道是否可以使用 React Native 弹出菜单，显示并与 headerRight 结合使用

Answer 3

我也一直在想这个问题，并找到了一个解决方案： 通常，所有 Menu 部分都必须位于Menu标签内，因此MenuTrigger也是如此。 您可以设置MenuTrigger样式，但我没有将其放入顶部栏。

好消息：这比这更容易，只需像这样将整个Menu放入您的navigationOptions：

static navigationOptions = ({navigation}) => ({
title: 'Uploaded Videos',
drawerLockMode: 'locked-closed',
headerRight: 
<Menu renderer={SlideInMenu} style={{ zIndex: 10 }}>
<MenuTrigger text="open menu"/>
<MenuOptions style={{ flex: 1 }}>
<Text>Menu</Text>
<MenuOption onSelect={() => { console.log("clicked") text="Click me" />
</MenuOptions>
</Menu>

警告：navigationOptions是静态的，因此在菜单中不能使用该组件的功能。但是有一些解决方法，请参阅反应本机导航中的此问题的一个示例。通常，您可能应该为此使用 redux。

希望这仍然对您有所帮助！