Hey guys ,
I am using the menu function of React Native Paper .
And I had create a component for PopMenu,as follow
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({style}) {
const [visible,setVisible] = React.useState(false);
const openMenu = () => setVisible(true);
const closeMenu = () => setVisible(false);
return (
<Provider>
<View
style={{
style
}}>
<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;
And I had found a problem , I was trying to insert this component into another screen which I need it appear in the most top layer . Therefore , I set its position “absolute” .however ,the menu got started to pop on a weird position ,like the pic below
I have attached my code also ,please take a look ,thank you so much !!
import React from 'react';
import { StyleSheet, View,Button, Image, ImageBackground } from 'react-native'
import PopMenu from '../components/PopMenu';
function TryScreen(props) {
return (
<View style ={styles.bg}>
<ImageBackground source ={require('../assets/gift.png')} style={styles.img}>
<Image source={require("../assets/red_jacket.png")} style={styles.profile_img}/>
<PopMenu position={styles.pop}/>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
pop:{
position :"absolute",
},
bg :{
flex :1,
justifyContent :'center',
alignItems :"center",
},
img :{
width : 300,
height :300,
justifyContent :'center',
alignItems :"center"
},
profile_img :{
width : 100,
height :100,
borderRadius :50,
}
})
export default TryScreen;