Выравнивание response-native-popup-menu MenuOptions вправо - PullRequest
Новая
       23

Выравнивание response-native-popup-menu MenuOptions вправо

0 голосов
/ 01 ноября 2018

Я не могу на всю жизнь понять, как выровнять выпадающее меню. Я пытался играть с flex-end и абсолютным позиционированием с правым: 0 и т. Д.

Мне нужны варианты меню, перечисленные справа, внизу и справа от основного триггерного желтого поля. Или, по крайней мере, встык справа от розовой коробки. Я могу легко изменить высоту с помощью marginTop.

enter image description here

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>

);

1 Ответ

0 голосов
/ 18 ноября 2018

, если ширина «основного триггера» фиксирована (или известна), вы, вероятно, можете играть с некоторыми полями или похожим стилем.

Однако, если вы ищете более чистое решение, обратитесь к 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>
  );
};
...