为了账号安全,请及时绑定邮箱和手机立即绑定

ReactNative学习笔记--下拉选择菜单的简单封装

2016.12.08 11:03 13237浏览

ReactNative 学习笔记--封装下拉菜单

单个下拉子项

先看整体要做的效果

1.实现原理:

先做一行按钮,使我们要点击弹出菜单列表的按钮,然后计算点击的按钮所在的位置,再通过点击按钮的高度计算出要弹出列表的位置和宽度高度等,利用绝对布局在Modal组件上显示,并设置对应的效果,例如'fade',弹出的Modal覆盖整个界面,选择列表子项或者点击其他位置(Modal上)都要让Modal消失,再次点击按钮的时候,显示下拉菜单前重新计算对应按钮的位置和点击按钮对应的下拉菜单的位置,然后重新更改下拉菜单的位置和内容并显示,后面就按这个逻辑。

2.实现代码

分两步:

单个子项 SiftListItem

先看render了解整体布局

render() {
        return (
            <View {...this.props}>
                {this._renderButton()}
                {this._renderSiftList()}
            </View>
        );
    }

_renderButton函数 负责按钮 showSiftList控制着是否显示SiftList
里面的item:

item:
{
      title:'交易方向',
     tag:0,
     list:[],
 }
_renderButton = ()=> {
        const {item,textStyle,style}=this.props;
        const {showSiftList}=this.state;
        let icon = showSiftList?require('../images/icon_up.svg'):require('../images/btn_down.svg');
        return (
            <TouchableOpacity 
                    onPress={this._onButtonPress}>
                <View style={[styles.button,style]}>
                    <Text style={[styles.buttonText, textStyle]}
                          numberOfLines={1}>
                        {item.title}
                    </Text>
                    <SvgImage
                        style={{marginLeft:4}}
                        height={6}
                        source={icon}
                    />
                </View>
            </TouchableOpacity>
        );
    };

_renderSiftList负责下拉菜单绘制,可以写成ListView,如果下拉菜单的高度不大,且确定就可以用ScrollView,这里就是用的ScrollView

_renderModal = ()=> {
        const {showSiftList,selectedIndex}=this.state;
        const {style,item}=this.props;
        if (showSiftList && this._buttonFrame) {
            let frameStyle = this._calculatePosition();
            return (
                <Modal animationType='fade'
                       transparent={true}
                >
                    <TouchableWithoutFeedback onPress={this._onModalPress}>
                        <View style={[styles.modal]}>
                            <View style={[frameStyle,styles.dropdown,{height:item.list?30*item.list.length:0},{width:style.width}]}>
                                {
                                    item.list?item.list.map((sublist,i)=>{
                                    return(
                                        <TouchableOpacity
                                            onPress={()=>this.select(i)}
                                            key={i}
                                        >
                                            <View style={[styles.subItemStyle,{width:style.width-1},selectedIndex===i&&{backgroundColor:System_styles.hei_240}]}
                                            >
                                                <Text style={[styles.rowText,selectedIndex===i&&{color:System_styles.blue}]}>
                                                    {sublist}
                                                </Text>
                                            </View>
                                        </TouchableOpacity>
                                    )
                                }):null}
                            </View>
                        </View>
                    </TouchableWithoutFeedback>
                </Modal>
            );
        }
    };

计算SiftList菜单的位置

_calculatePosition = ()=> {
         const {style}=this.props;
        let dimensions = Dimensions.get('window');
        let windowWidth = dimensions.width;
        let windowHeight = dimensions.height;

        let dropdownHeight = (style && StyleSheet.flatten(style).height) ||
            StyleSheet.flatten(styles.dropdown).height;

        let bottomSpace = windowHeight - this._buttonFrame.y - this._buttonFrame.h;
        let rightSpace = windowWidth - this._buttonFrame.x;
        let showInBottom = bottomSpace >= dropdownHeight || bottomSpace >= this._buttonFrame.y;
        let showInLeft = rightSpace >= this._buttonFrame.x;

        var style = {
            height: dropdownHeight,
            top: (showInBottom ? this._buttonFrame.y + this._buttonFrame.h : Math.max(0, this._buttonFrame.y - dropdownHeight))-0.5,
        }

        if (showInLeft) {
            style.left = this._buttonFrame.x;
        } else {
            let dropdownWidth = (style && StyleSheet.flatten(style).width) || -1;
            if (dropdownWidth !== -1) {
                style.width = dropdownWidth;
            }
            style.right = rightSpace - this._buttonFrame.w;
        }

        if (this.props.adjustFrame) {
            style = this.props.adjustFrame(style) || style;
        }

        return style;
    };

子项的选中和下拉菜单的显示、隐藏方法

show = ()=> {
        this._updatePosition(() => {
            this.setState({
                showSiftList: true,
            });
        });
    };

    hide = ()=> {
        this.setState({
            showSiftList: false,
        });
    };

    select = (index)=>  {
        const {item,selectedCallBack}=this.props;
        const {selectedIndex}=this.state;

        if (index == null || item.list == null || index >= item.list.length) {
            index = selectedIndex;
        }
        this.setState({
            selectedIndex: index,
        });
        selectedCallBack&&selectedCallBack(index,item.tag);
        this.hide();
    };

获取按钮对应位置的方法

  _updatePosition = (callback)=>  {
        if (this._button && this._button.measure) {
            this._button.measure((fx, fy, width, height, px, py) => {
                this._buttonFrame = {x: px, y: py, w: width, h: height};
                callback && callback();
            });
        }
    };

封装成一个组件SiftListControl

export default class SiftListControl extends Component {

    static defaultProps = {
        items:[
            {
                title:'交易方向',
                tag:0,
                icon:require('../images/btn_down.svg'),
                list:[],
            }
        ]
    };

    constructor(){
        super();
        this.state = {

        };
    }

    _selectedIndex = (index,tag)=>{
        const {callBack}=this.props;
        callBack&&callBack(index,tag);
    };

    render() {
        const {items,subItemStyle}=this.props;
        return (
            <View style={[styles.listBar,this.props.style]}>
                {
                 items.map((item,i)=>{
                     return(
                         <SiftListViewNew
                             style={{backgroundColor:'white',width:subItemStyle.width}}
                             item={item}
                             key={i}
                             selectedCallBack={this._selectedIndex}
                         >
                         </SiftListViewNew>
                     )
                 })   
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    listBar:{
        height:32,
        flexDirection:'row',
    }
});

下载链接:http://7xrqmg.com1.z0.glb.clouddn.com/Sift.zip

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

13人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消