我有一个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
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: {} };
现在看来它已经关闭了:
这打开了:
我想让打开的盒子向下移动到触发按钮下方,同时仍将触发器保持在同一位置.我怎样才能用风格来实现呢?
您可以通过将optionsContainerStyle道具传递给MenuOptions组件来实现,而不是样式道具.像这样的东西.
<MenuOptions optionsContainerStyle={{ marginTop: 40 }}> ... </MenuOptions>