我一辈子都想不出如何让下拉菜单右对齐。我试过使用 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>
);
最佳答案
尝试将 marginLeft 设为负值,例如 -10;这对我有用:
<MenuOptions
optionsContainerStyle={{marginLeft: -20,}}
>
关于css - 将 react-native-popup-menu MenuOptions 右对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53093271/