ReactNative一个自己撸的menu组件

106 阅读 0 评论 70 点赞

我是靠谱客的博主酷酷豌豆，这篇文章主要介绍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,
}
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
/**
* 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,
}
});