React native 反应本机弹出菜单未在菜单触发器附近弹出

我正在我的项目中使用react原生弹出菜单。 代码

import React，{Component}来自'React'；
从“react native”导入{视图、图像、文本、样式表、平面列表}；
从“../../../../constants”导入{图标，颜色}
进口{
MenuProvider，
菜单，
菜单选项，
菜单选项，
梅努特里格，
}从“反应本机弹出菜单”；
类区域扩展组件{
建造师（道具）{
超级（道具）；
this.state={}
}
render（）{
返回(
法利赫学校
{/*  */}
{
}}customStyles={{paddingVertical:8}}>
删除
);
}
}
const styles=StyleSheet.create({
conatiner：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
}
});
导出默认区域；

输出 [！[在此处输入图像描述][1][1]

如屏幕截图所示，菜单未在触发器旁边弹出，如何定位菜单触发器旁边的弹出菜单？

---

[1] ：

最有可能是MenuProvider的位置错误。它应该包装您的整个应用程序。

import React, { Component } from 'react';
import { View, Image, Text, StyleSheet, FlatList } from 'react-native';
import { icons, COLORS } from '../../../../constants'
import {
    MenuProvider,
    Menu,
    MenuOptions,
    MenuOption,
    MenuTrigger,
} from 'react-native-popup-menu';
class Areas extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
  render() {
        return (
            <MenuProvider>
                <View style={StyleSheet.conatiner}>
                    <View style={{ display: 'flex', flexDirection: 'row', paddingVertical: 16, borderRadius: 4, backgroundColor: "#F8F9FB", marginTop: 16, paddingLeft: 8, height: 80 }}>
                        <View style={{ flex: .8 }}>
                            <Text>Al falih school</Text>

                        </View>
                        <View style={{ flex: .2, justifyContent: 'center', alignItems: 'center' }}>
                            {/* <Image style={{height:15,width:15}}  source={icons.ellipse} /> */}
                            <Menu>
                                <MenuTrigger children={<Image style={{ height: 15, width: 15 }} source={icons.ellipse} />} />
                                <MenuOptions>
                                    <MenuOption onSelect={() => {
                                    }} customStyles={{ paddingVertical: 8 }}>
                                        <Text>Delete</Text>
                                    </MenuOption>

                                </MenuOptions>
                            </Menu>

                        </View>
                    </View>
                </View>
            </MenuProvider>
        );
    }
}

const styles = StyleSheet.create({
    conatiner: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});
export default Areas;