React Native实现京东下拉菜单

2019-8-3 更新成了TS版本的

我将项目升级成TS版本了，可以看这里

https://github.com/Tzng/React-Component/tree/master/react-native/ActionsBarTs

具体的用法是这样的：

 this.changeBar(flag, 'aaa')}
       isActive={activeBar === 'aaa'}
       data={deplist}
       themeColor={theme.themeColor}
       handleSubmit={(data, type) => this.onSelectSubmit(data, 'aaa', type)}
/>

注意下层级，如果是多个的话，这个要放在上面哦

首先看看效果

示例.gif

基本思路

看动图我们可以发现，组件是由三部分组成的，一个是标题部分，也就是用来点击的地方，一个是弹出来的那一块，还以及一个遮罩层。

标题部分

这部分是很简单，就是一个文本和一个Icon

    
        
            {/* 结果的展示 */}
            {selectItems.length === 0 ? data.title : this.split(itemNames) + '(' + selectItems.length + ')'}
        
    

在使用TouchableOpacity的时候，需要考虑到一个情况就是，用户可能会快速的点击，从而出现一些异常现象，所以要对点击事件进行点击间隔限制操作，所以这里是用的一个自己写的ZlTouchable组件来完成的

代码：

import React from 'react';
import { TouchableOpacity } from 'react-native';

class ZlTouchable extends React.Component {
    constructor(props) {
        super(props);
        this.lastClickTime = 0;
    }

    onPress() {
        const { onPress } = this.props;
        const clickTime = Date.now();
        if (!this.lastClickTime || Math.abs(this.lastClickTime - clickTime) > 300) { // 350的时间可以延长，根据需要改变
            this.lastClickTime = clickTime;
            if (onPress) {
                onPress();
            } else {
                return '';
            }
        }
        return '';
    }

    render() {

        const { activeOpacity, style, disabled, children } = this.props;

        return (
             this.onPress()}
                activeOpacity={activeOpacity || 0.85}
                style={style}
                disabled={disabled}
            >
                {children}
            );
    }
}

export default ZlTouchable;

这样的话，我们就可以解决用户快速点击的问题了。

弹出菜单

这里的弹出菜单，我是这么想的，拿到数据后呢，先把菜单生成出来，放在标题部分的上面，高度话，用父组件传递进来。这样的话，就得这么写了

    /**
     * 说明：生成下拉菜单
     * @author tangbin
     * @date 2019/3/29
     * @time 11:04
     */
    renderActivityPanel = () => {

        // 得到数据
        const { data: { items } } = this.props;

        // 得到最大高度
        const { maxHeight, themeColor } = this.props;

        const { rotationAnim } = this.state;

        return (
            
                
                    
                        
                            {items.map(item => (
                                 this.itemOnPress(item)}
                                >
                                    {this.renderChcek(item, themeColor)}
                                
                            ))}
                        
                    
                    
                        
                            
                                取消
                            
                        
                        
                            
                                确定
                            
                        
                    
                    
                
            
        );
    };

把我们的选项用ScrollView包裹起来，这样就能滚动了，然后，用动画组件把整改菜单给包裹进去，并且在动画组件设置相应的样式，比如top要设置成负数，zIndex也要设置对应的等级，然后我们就可设置相应的动画了

动画

首先，我们要设置点击菜单的动画

    openPanel = () => {
        const { rotationAnim, fadeAnim } = this.state;
        this.isShowCouver = true;
        rotationAnim.setValue(0);
        Animated.parallel([
            // 使用宽松函数让数值随时间动起来。
            Animated.spring( // 随时间变化而执行动画
                rotationAnim, // 动画中的变量值
                {
                    toValue: 1, // 透明度最终变为1，即完全不透明
                    duration: 300, // 让动画持续一段时间
                    useNativeDriver: true // <-- 加上这一行
                }
            ),
            // 使用宽松函数让数值随时间动起来。
            Animated.spring( // 随时间变化而执行动画
                fadeAnim, // 动画中的变量值
                {
                    toValue: 0.5, // 透明度最终变为1，即完全不透明
                    duration: 300, // 让动画持续一段时间
                    useNativeDriver: true // <-- 加上这一行
                }
            )
        ]).start();
    };

然后呢，设置关闭的动画

    // 关闭动画
    closePanel = () => {
        const { rotationAnim } = this.state;
        this.isShowCouver = false;
        rotationAnim.setValue(1);
        // 这里只执行弹窗的动画，是因为遮罩层组件在切换的时候，已经被卸载了
        Animated.spring(
            rotationAnim,
            {
                toValue: 0,
                duration: 300,
                useNativeDriver: true // <-- 加上这一行
            }
        ).start();
    };

关闭动画要把打开的动画少一点，因为遮罩层在关闭的时候，已经没有了，所以是不需要的。

完整代码看地址:
https://github.com/Tzng/React-Component/tree/master/react-native/ActionBar