我一直在尝试设置菜单样式，但无法正常工作

Question

我正在使用react-native-popup-menu在我的react-native应用程序中创建一个菜单，并且我的菜单正在创建和运行，但是它的位置不正确。

我需要将菜单组件放置在屏幕的某个位置，但是当我在样式表提供者中添加样式底部：“ 15％”时，它将移动整个屏幕。

我试图按照文档中的说明制作自定义渲染器，但是它停止在屏幕上显示菜单。这是我的自定义渲染器代码：

const CustomMenu = (props) => {
    const {
        style, children, layouts, ...other
    } = props;
    const position = { bottom: '15%', left: 0, right: 0 };
    return (
        <View {...other} style={[style, position]}>
            {children}
        </View>
    );
};

这是我一直在使用菜单的地方：

const OpenMenu = ({ nav }: MenuProps) => (
    <Menu renderer={CustomMenu} onOpen={() => console.log('its opening')}>
        <MenuTrigger>
            <TouchableOpacity style={styles.trigger}>
                <Icon
                  type="materialIcons"
                  color="white"
                  name="menu"
                />
            </TouchableOpacity>
        </MenuTrigger>
        <MenuOptions
          customStyles={{
              optionsContainer: { width: '100%' },
              optionWrapper: styles.optionStyle,
              optionText: { fontSize: 22 }
            }}
        >
            <MenuOption onSelect={() => nav.navigate('screenA')}>
                <Icon containerStyle={styles.iconMargin} name="help-outline" type="feather" />
                <Text>ScreenA</Text>
            </MenuOption>
            <MenuOption onSelect={() => nav.navigate('screenB')}>
                <Icon containerStyle={styles.iconMargin} name="help-outline" type="material-community" />
                <Text>ScreenB</Text>
            </MenuOption>
            <MenuOption onSelect={() => nav.navigate('screenC')}>
                <Icon containerStyle={styles.iconMargin} name="help-outline" type="material" />
                <Text>ScreenC</Text>
            </MenuOption>
            <MenuOption onSelect={() => nav.navigate('screenD')}>
                <Icon containerStyle={styles.iconMargin} name="help-outline" type="simple-line-icon" />
                <Text>ScreenD</Text>
            </MenuOption>
        </MenuOptions>
    </Menu>
);

我想知道如何正确更改菜单的位置而不会从屏幕上消失或移动整个屏幕。