instea/react-native-popup-menu

how to adjust popover styles?

Xiao198 opened this issue · 0 comments

I set the renderer of the Menu component to popover and the placement to bottom. However, I don't want the popover to appear directly below the MenuTrigger, but to offset it a bit to the left. I tried to set marginRight for MenuOptions's optionsContainer, but it didn't work. I used react native debugger and found that the outer layer of MenuOptions is Popover. I want to set a marginRight for it, but I don't know how to do it.
WechatIMG2

There is the code.
<Menu onBackdropPress={() => setShowPopover(false)} renderer={renderers.Popover} rendererProps={{ placement: 'bottom', anchorStyle: { backgroundColor: '#ffffff', zIndex: 9999, }, }} opened={isShowPopover} > <MenuTrigger customStyles={{ TriggerTouchableComponent: TouchableOpacity, triggerOuterWrapper: { position: 'absolute', right: px2dp(0), top: px2dp(56), }, }} onPress={() => setShowPopover(true)} > <Image source={props.icon} style={{ width: px2dp(30), height: px2dp(30), marginBottom: px2dp(11), }} /> </MenuTrigger> <MenuOptions customStyles={{ optionsContainer: { width: px2dp(172), borderRadius: px2dp(12), borderColor: 'white', borderWidth: 10, }, }} > {props.index !== 0 && ( <MenuOption onSelect={() => { handleListUpdate((newNameList, newIdList) => { swapItems(newNameList, props.index, props.index - 1); swapItems(newIdList, props.index, props.index - 1); }); setShowPopover(false); }} > <PopoverItem source={require('../../../imgs/up-move.png')} text="上移" /> </MenuOption> )} {props.index !== context.intentPoiNameList.length - 1 && ( <MenuOption onSelect={() => { handleListUpdate((newNameList, newIdList) => { swapItems(newNameList, props.index, props.index + 1); swapItems(newIdList, props.index, props.index + 1); }); setShowPopover(false); }} > <PopoverItem source={require('../../../imgs/down-move.png')} text="下移" /> </MenuOption> )} <MenuOption onSelect={() => { setshowModal(true); setShowPopover(false); }} > <PopoverItem source={require('../../../imgs/delete.png')} text="删除" /> </MenuOption> </MenuOptions> </Menu>