React Native 弹出菜单移动选项框 [英] React Native Popup Menu Moving the Options Box
本文介绍了React Native 弹出菜单移动选项框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个 React Native 弹出菜单实现如下:
I have a React Native Popup Menu implemented as follows:
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: {}
};
现在它看起来像这样关闭:
Now currently it looks like this closed:
这打开了:
我想让打开的框向下移动到触发器按钮下方,同时仍将触发器保持在同一位置.我如何通过样式实现这一点?
I would like to have the opened box move down below the trigger button while still keeping the trigger in the same place. How can I accomplish that with styles?
推荐答案
您可以通过将 optionsContainerStyle
道具传递给 MenuOptions 组件而不是样式道具来实现这一点.
You can achieve that by passing optionsContainerStyle
props to MenuOptions component, not style props.
类似的东西.
<MenuOptions optionsContainerStyle={{ marginTop: 40 }}>
...
</MenuOptions>
这篇关于React Native 弹出菜单移动选项框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文