调整react-native-popup-menu MenuOptions right
调整react-native-popup-menu MenuOptions right
提问于 2018-11-01 07:27:58
我无论如何也想不出如何让下拉菜单正确对齐。我尝试过使用flex-end和绝对定位的right: 0等。
我希望有菜单选项列在右边，下面和紧凑的主要触发黄色框的权利。或者至少撞到粉红色盒子的右边。我可以用marginTop很容易地改变高度的位置。
const TermPlanSelector = ({ options, selected, onChangeCallback }) => (
<Menu style={{ borderColor: 'yellow', borderWidth: 1 }}>
<MenuTrigger style={[formStyles.optionsSelectContainer]}>
<Text style={[formStyles.optionsSelectorText, { borderColor: 'pink', borderWidth: 1 }]}>
{ getLabel(selected, options) }
</Text>
<SelectorDownIcon />
</MenuTrigger>
<MenuOptions customStyles={{
optionsWrapper: {
borderColor: 'yellow', borderWidth: 1
},
optionsContainer: [
formStyles.optionsContainer,
{ borderColor: 'red', borderWidth: 1 }
],
}}
>
{
options.map((option) => (
<View key={option.value} style={[formStyles.optionItemView, { borderColor: 'green', borderWidth: 1 }]}>
<MenuOption onSelect={() => onChangeCallback(option.value)}>
<Text style={formStyles.optionItemText}>
{option.label}
</Text>
</MenuOption>
</View>
))
}
</MenuOptions>
</Menu>)；
回答 2
Stack Overflow用户
发布于 2018-11-18 17:39:58
如果“主触发器”的宽度是固定的(或已知的)，您可能可以使用一些页边距或类似的样式。
然而，如果你正在寻找更干净的解决方案，请查看扩展指南的custom renderer部分，在那里你可以完成控制。
下面是一个简单的例子，如何在0，0坐标上渲染菜单：
const CustomMenu = (props) => {
const { style, children, layouts, ...other } = props;
const position = { top: 0, left: 0 }
return (
<View {...other} style={[style, position]}>
{children}
</View>
);
}; Stack Overflow用户
发布于 2020-10-11 01:40:17
尝试将marginLeft设置为负，如-10；这对我很有效：
<MenuOptions
optionsContainerStyle={{marginLeft: -20,}}
>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53093271
复制相关文章
相似问题
腾讯云开发者
