css - 右对齐 react-native-popup-menu MenuOptions

Question

我一生都无法弄清楚如何使下拉列表正确对齐。我试过用 right: 0 等玩 flex-end 和绝对定位。

我希望在主触发器黄色框的右侧、下方和紧靠右侧列出菜单选项。或者至少与粉红色盒子的右侧对接。我可以很容易地改变高度位置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>

);

标签： cssreact-nativereact-native-popup-menu

Answer 1

尝试将 marginLeft 设为负数，例如 -10；这对我有用：

<MenuOptions
      optionsContainerStyle={{marginLeft: -20,}}
>