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,
    }
});

还是自己写的方便多  样式什么都好修改 我这个只是个最基础的  更深的功能需要你自己去扩展