ReactNative一个自己撸的menu组件

有群里的小伙伴需要一个类似qq的那种标题栏右边的menu组件 自己顺便写了一个 试试 方便以后用的 废话不多说 先上图

不会上传动图  实际效果是点击更多 弹出menu  有动画 再次点击 关闭menu  或者点击背景 也能关闭menu 

直接贴代码  需要的拿去 直接跑  可以在这个基础上做更多的定制 

/**
* Created by wangqiang on 2017/7/27.
*/
import React from 'react';
import {View,Animated,Dimensions,Easing, Text, StyleSheet, TouchableOpacity} from 'react-native';
export default class MenuDemo extends React.PureComponent {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
menu: new Animated.Value(0),
flag: true
};
}
startAnimated() {
Animated.timing(this.state.menu, {
toValue: 1,
duration: 300,
easing: Easing.out(Easing.back())
}).start(() => {
this.setState({
flag: !this.state.flag
})
});
}
stopAnimated() {
Animated.timing(this.state.menu, {
toValue: 0,
duration: 300,
easing: Easing.inOut(Easing.quad),
}).start(() => {
this.setState({
flag: !this.state.flag
})
});
}
onPress(e) {
if (this.state.flag) {
this.startAnimated();
} else {
this.stopAnimated();
}
}
close(){
this.stopAnimated();
}
render() {
const mWidth = this.state.menu.interpolate({
inputRange: [0, 1],
outputRange: [0, 130]
});
const mHeight = this.state.menu.interpolate({
inputRange: [0, 1],
outputRange: [0, 200]
});
const mOpacity = this.state.menu.interpolate({
inputRange: [0, 1],
outputRange: [0, 1]
});
return (
<View style={styles.container}>
<View style={styles.title}>
<TouchableOpacity
activeOpacity={0.8}
style={styles.leftView}
onPress={(e) => {
this.onPress(e)
}}>
<Text style={styles.text}>更多</Text>
</TouchableOpacity>
</View>
<Animated.View style={[styles.sanjiao,
{opacity: mOpacity
}]}>
</Animated.View>
<Animated.View
style={[styles.menu,
{
width: mWidth,
height: mHeight, opacity: mOpacity
}]}
>
</Animated.View>
<Animated.View
style={[styles.back,{opacity:mOpacity}]}>
<TouchableOpacity
onPress={()=>{this.close()}}
activeOpacity={1}
style={{flex:1}}
/>
</Animated.View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
title: {
height: 60,
backgroundColor: 'red',
},
leftView: {
position: 'absolute',
right: 20,
bottom: 0,
width:30,
height:30,
borderColor:'transparent'
},
text: {
color: '#fff'
},
menu: {
position: 'absolute',
right: 5,
top: 64,
backgroundColor: '#fff',
borderRadius: 5,
zIndex:3,
borderColor:'transparent'
},
back:{
backgroundColor:'rgba(0,0,0,0.2)',
flex:1,
width:Dimensions.get('window').width,
height:Dimensions.get('window').height,
},
sanjiao:{
width:0,
height:0,
borderWidth:10,
borderColor:'transparent',
borderBottomColor:'#fff',
position: 'absolute',
top: 45,
right: 25,
zIndex:2,
}
});

最后

以上就是酷酷豌豆为你收集整理的ReactNative一个自己撸的menu组件的全部内容，希望文章能够帮你解决ReactNative一个自己撸的menu组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。