React Native 弹出菜单移动选项框答案

【问题标题】：React Native Popup Menu Moving the Options BoxReact Native 弹出菜单移动选项框
【发布时间】：2017-08-08 20:28:50
【问题描述】：

我有一个 React Native Popup Menu 实现如下：

import React, { Component } from 'react';
import { Text } from 'react-native';
import { Icon, Divider } from 'react-native-elements';
import {
  Menu,
  MenuTrigger,
  MenuOptions,
  MenuOption
} from 'react-native-popup-menu';
import { connect } from 'react-redux';
import firebase from 'firebase';
import { STATUS_BAR_HEIGHT } from '../constants';

class PopUpMenu extends Component {
  render() {
    const { menuStyle, menuOptionsStyle, menuTriggerStyle } = styles;

    return (
      <Menu style={menuStyle}>
        <MenuTrigger style={menuTriggerStyle}>
          <Icon
            name="menu"
            color="white"
            size={30}
          />
        </MenuTrigger>
        <MenuOptions style={menuOptionsStyle}>
          <MenuOption>
            <Text>{this.props.user.email}</Text>
          </MenuOption>
          <MenuOption>
            <Divider />
          </MenuOption>
          <MenuOption text="Log Out" onSelect={() => this.signOutUser()} />
        </MenuOptions>
      </Menu>
    );
  }
}

const styles = {
  menuStyle: {
    marginTop: STATUS_BAR_HEIGHT,
    marginRight: 12
  },
  menuTriggerStyle: {},
  menuOptionsStyle: {}
};

现在它看起来像这样关闭：

这个打开了：

我想让打开的框向下移动到触发器按钮下方，同时仍将触发器保持在同一位置。我怎样才能用样式来实现呢？

【问题讨论】：

我认为您需要从菜单组件中执行此操作。您绝对应该添加您正在使用的菜单？
@KhalilKhalaf 我不明白你的陈述/问题。
包括您的所有进口商品，我们将开展业务
@KhalilKhalaf 我已经添加了它们，但我不确定这有什么帮助....

标签： react-native react-native-popup-menu

【解决方案1】：

您可以通过将 optionsContainerStyle 道具传递给 MenuOptions 组件而不是样式道具来实现。

类似的东西。

<MenuOptions optionsContainerStyle={{ marginTop: 40 }}>
...
</MenuOptions>

【讨论】：