5

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

4

3 回答 3

3

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 上通常使用操作表而不是菜单。

于 2017-09-29T15:26:39.730 回答
0

我也一直想知道这一点，并找到了一个解决方案：通常，所有菜单部分都必须在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是静态的，所以在你的菜单中你不能使用组件的功能。但是有一些方法可以解决这个问题，例如在 react-native-navigation中查看这个问题。通常，您应该为此使用 redux。

希望这仍然可以帮助您！

于 2018-02-28T11:54:05.540 回答
0

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

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

于 2018-03-11T14:34:03.837 回答