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的navigationOptions，将我的自定义按钮设置为RightHeader

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

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

Answer 3

我也一直在想这个问题，并找到了解决方案：通常，所有菜单部分都必须位于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是静态的，因此在您的菜单中您无法使用该组件的功能。但是有很多方法，请参阅一个例子this issue at react-native-navigation。通常，您应该使用redux。

希望这对你有帮助！

React-Native-Popup-Menu和Stack Navigator

3 个答案: