wix/react-native-navigation 导航栏中的上下文弹出菜单

Question

是否可以在 "react-native-navigation" 导航栏中使用 "react-native-popup-menu" 设置三点上下文菜单？或者我们是否有任何其他方法在 IOS 和 Android 中使用 "react-native-navigation" 导航栏设置三点上下文菜单？

Answer 1

您可以使用 showAsAction 属性控制每个按钮（打开 Android）的优先级和位置。有关详细信息，请参阅 docs。

简而言之，以下代码片段将向菜单添加两个按钮，在菜单外添加一个按钮：

static navigatorButtons = {
  rightButtons: [
    {
      id: 'btn1',
      title: 'Menu button 1'
      showAsAction: 'never'
    },
    {
      id: 'btn2',
      title: 'Menu button 2'
      showAsAction: 'never'
    },
    {
      id: 'btn3',
      title: 'Regular Button'
      icon: require('./img/button.jpeg'),
      showAsAction: 'always'
    }
  ]
);

这在 iOS 上不可用，因为在 iOS 上通常使用操作 sheet 而不是菜单。

Answer 2

我也一直在想这个问题，找到了解决办法：通常，所有菜单部分必须位于 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。

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

Answer 3

我实际上用这个库制作了自己的上下文菜单： https://github.com/react-native-community/react-native-modal

所以基本上它是一个背景完全透明的模式。模式的内容呈现在 "three dot context menu" - 按钮的正下方。通过使用他们的 onBackdropPress 函数，如果用户在菜单外按下，您可以关闭上下文菜单。

wix/react-native-navigation 导航栏中的上下文弹出菜单

Context popup menu in wix/react-native-navigation navbar

react-native

react-native-navigation

react-native-popup-menu