Wix/React-Navigation Navbar中的上下文弹出菜单

Question

是否可以在" react-native-navigation"纳维尔（Navbar）中使用" react-native-nave-popup-menu"设置三个点上下文菜单？或者，我们还有其他方法可以在iOS和Android中设置三个点上下文菜单，并使用" React-Native-Navigation" Navbar？

Answer 1

您可以使用showAsAction属性控制每个按钮（在Android上）的优先级和定位。有关更多详细信息，请参见文档。

简而言

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上通常使用动作表代替菜单。

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是静态的，因此在菜单中，您无法使用组件的功能。但是有一些方法，请参见一个例子，在一个反应本性的活动中。通常，您可能应该为此使用redux。

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

Answer 3

我实际上使用此库制作了自己的上下文菜单：https://github.com/reaeact-native-community/reeact-native-modal

基本上，它是一种具有背景完全透明的模态。模态的内容呈现在"三个点上下文菜单" - 按钮下方。通过使用其OnbackDroppress函数，如果用户按菜单之外，您可以将上下文菜单删除。