react-native – React Native弹出菜单移动选项框

发布时间：2020-12-15 16:21:10 所属栏目：百科来源：网络整理

导读：我有一个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

我有一个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: {}
};

现在看来它已经关闭了：

Closed

这打开了：

Opened

我想让打开的盒子向下移动到触发按钮下方,同时仍将触发器保持在同一位置.我怎样才能用风格来实现呢？

解决方法

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

像这样的东西.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!