React native 反应本机下拉菜单如何显示在第一层上？

我正在使用React Native paper api菜单， 当我发现一个奇怪的问题，弹出菜单不能出现在活动的第一层时，它出现在一个奇怪的地方，如下面我展示的照片：

我附上我的代码，你能帮我看一下吗，非常感谢

弹出菜单组件

import React from 'react';
import { StyleSheet, View } from 'react-native';
import {Button, Menu, Divider, Provider} from 'react-native-paper';
import Icon from './Icon';
import colors from '../config/colors';
function PopMenu(props) {
    const [visible,setVisible] = React.useState(false);
    const openMenu = () => setVisible(true);
    const closeMenu = () => setVisible(false);
    return (
        <Provider>
        <View 
        style = {{
            flexDirection : "row",
            justifyContent :"center",
            borderWidth : 1,
            borderColor : colors.black,
        }}
        >
            <Menu
            visible = {visible}
            onDismiss ={closeMenu}
            anchor ={ <Icon  name='chevron-down-circle' iconColor={colors.black} size={30} onPress={openMenu}/>}
            >
                <Menu.Item onPress ={()=>{}} title="Item 1"/>
                <Menu.Item onPress ={()=>{}} title="item2"/>
                <Divider/>
                <Menu.Item onPress={() => {}} title="Item 3" />


            </Menu>
            
        </View>


        </Provider>
    );
}


const styles = StyleSheet.create({
    
})
export default PopMenu;

从“React”导入React；
从“react native”导入{StyleSheet，View}；
从“react native paper”导入{按钮、菜单、分隔器、提供程序}；
从“./Icon”导入图标；
从“../config/colors”导入颜色；
功能菜单（道具）{
const[visible，setVisible]=React.useState（false）；
常量openMenu=（）=>setVisible（true）；
const closeMenu=（）=>setVisible（false）；
返回(
{}title=“第1项”/>
{}}title=“item2”/>
{}title=“第3项”/>
);
}
const styles=StyleSheet.create({
})
导出默认弹出菜单；

无法右键显示弹出菜单的屏幕：

import React from 'react';
import { Image, StyleSheet, View } from 'react-native'
import colors from '../config/colors';
import AppText from './AppText/AppText';
import { MaterialIcons } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import ReadMoreTwo from './ReadMoreTwo';
import PopMenu from './PopMenu';



function MessageComponent({
    img,
    user_name,
    date,

}) {
    return (
        <View style={styles.container}>
        
         {/**profile_img , name ,date ,report container */}
         <View style={styles.first_container}>
             {/**User img */}
             <Image style={styles.user_img} source={require('../assets/red_jacket.png')}/>

             {/**User name + date container */}
             <View style={styles.user_name_date_container}>
              {/**User name */}
              <AppText style={styles.user_name}>Marry</AppText>

              {/**Date */}
              <AppText style={styles.date}>i min ago</AppText>
              
             </View>

            {/**report */}
            <PopMenu style={styles.report}/>

         </View>


         {/**open_gift like response container */}
         <View style= {styles.second_container}>
             <AppText style={styles.content_comment}>likes</AppText>
             <AntDesign name="like1" size={24} color={colors.primary} />
             <AppText style={styles.content_comment}>your comment</AppText>

         </View>

         {/**third forth container */}
         <View style={styles.third_forth_container}>
           {/**You said container*/}
           <View style ={styles.third_container}>
        <AppText style={styles.title_content_comment} >your comment ：</AppText>
        <ReadMoreTwo
        txt_content ="Hey,how are you friend ?"
        num_lines = {1}
        />
          </View>

        {/**Separator */}
     <View style ={{width:"100%",height:1,backgroundColor : colors.white}}/>

    


           {/**He/She said container*/}
           <View style={styles.forth_container}>
            <AppText style={styles.title_content_comment}>Jane Zhong :</AppText>
            <ReadMoreTwo
            txt_content ="I am fine ,thank you ! And you ?"
            num_lines = {1}
            />

           </View>
         </View>

         
            
        </View>
    );
}

const styles = StyleSheet.create({
   container : {
       width : "100%",
       minHeight : 120,
       flexDirection : "column",
       backgroundColor : colors.white,
       borderRadius : 15,
       elevation : 3,
       overflow : "hidden",
       shadowColor : colors.medium,
       shadowOffset : {width:1,height:1},
       shadowOpacity : 0.5,
       shadowRadius : 3,
   } ,

   first_container : {
       width : "100%",
       height : 60,
       flexDirection : 'row',
       alignItems : 'center',
   },
   user_img : {
       width : 50,
       height :50,
       borderRadius :25,
       marginLeft : 5,
   },
   user_name_date_container : {
       flexDirection : 'column',
       marginLeft : 5,
       width : "70%",
       
   },
   user_name : {
       fontSize : 16,
       marginLeft : 10,

   },
   date : {
       fontSize : 13,
       color : colors.medium,
       marginLeft : 12,
       marginTop :5,
   },
   second_container : {
      width :"100%",
      height : 60,
      flexDirection : 'row',
      alignItems : 'center',
      paddingLeft : 10,
   },
   content_comment : {
       fontSize : 15,
   },
   third_forth_container :{
       flexDirection : "column",
       margin : 10,
       marginBottom : 30,
       borderRadius : 5,
       overflow :"hidden",
       width : "90%",
       
   },
   third_container : {
       width : "100%",
       minHeight :35,
       backgroundColor : colors.light,
       flexDirection : 'row',
       alignItems : 'center',
       paddingLeft : 10,
       padding :10,
   },
   forth_container :{
       width : "100%",
       minHeight : 35,
       backgroundColor : colors.light,
       flexDirection : "row",
       alignItems : 'center',
       padding :10,
      
       
   },
   title_content_comment :{
       fontSize : 16,
       fontWeight : "bold",
       color : colors.black,
       marginRight :8,
   },
   content_comment_user : {
    fontSize : 16,
    
   }
})
export default MessageComponent;

从“React”导入React；
从“react native”导入{Image，StyleSheet，View}
从“../config/colors”导入颜色；
从“./AppText/AppText”导入AppText；
从“@expo/vector icons”导入{MaterialIcons}；
从“@expo/vector icons”导入{AntDesign}；
从“/ReadMoreTwo”导入ReadMoreTwo；
从“/PopMenu”导入PopMenu；
功能消息组件({
img，
用户名，
日期，
}) {
返回(
{/**profile_img，名称，日期，报告容器*/}
{/**用户img*/}
{/**用户名+日期容器*/}
{/**用户名*/}
结婚
{/**日期*/}
我早就知道了
{/**报告*/}
{/**打开类似礼物的响应容器*/}
喜欢
你的评论
{/**第三四个容器*/}
{/**你说的是容器*/}
您的评论：
{/**分隔符*/}
{/**他/她说容器*/}
钟珍:
);
}
const styles=StyleSheet.create({
容器：{
宽度：“100%”，
身高：120，
flexDirection:“列”，
背景颜色：colors.white，
边界半径：15，
标高：3，
溢出：“隐藏”，
阴影颜色：colors.medium，
阴影偏移：{宽度：1，高度：1}，
阴影不透明度：0.5，
阴影半径：3，
} ,
第一个集装箱：{
宽度：“100%”，
身高：60，
flexDirection:'行'，
对齐项目：“居中”，
},
用户信息：{
宽度：50，
身高：50，
边界半径：25，
边缘左：5，
},
用户\名称\日期\容器：{
flexDirection:'列'，
边缘左：5，
宽度：“70%”，
},
用户名：{
尺寸：16，
边缘左：10，
},
日期：{
尺寸：13，
颜色：colors.medium，
marginLeft:12，
玛金托普：5，
},
第二个容器：{
宽度：“100%”，
身高：60，
flexDirection:'行'，
对齐项目：“居中”，
paddingLeft:10，
},
内容和评论：{
尺寸：15，
},
第三个集装箱：{
flexDirection:“列”，
差额：10，
marginBottom:30，
边界半径：5，
溢出：“隐藏”，
宽度：“90%”，
},
第三个集装箱：{
宽度：“100%”，
身高：35，
背景颜色：颜色。灯光，
flexDirection:'行'，
对齐项目：“居中”，
paddingLeft:10，
填充：10，
},
第四个集装箱：{
宽度：“100%”，
身高：35，
背景颜色：颜色。灯光，
flexDirection:“行”，
对齐项目：“居中”，
填充：10，
},
标题\内容\注释：{
尺寸：16，
fontWeight：“粗体”，
颜色：颜色，黑色，
marginRight:8，
},
内容\注释\用户：{
尺寸：16，
}
})
导出默认消息组件；