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

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

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

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

3 个答案: