react native 下拉选择

<ModalDropdown
    options={type}    //下拉内容数组
    style={styles.modal}    //按钮样式
    dropdownStyle={[styles.dropdown,{height:32*type.length}]}    //下拉框样式
    dropdownTextStyle={styles.dropdownText}    //下拉框文本样式
    renderSeparator={this._separator}    //下拉框文本分隔样式
    adjustFrame={this._adjustType}    //下拉框位置
    dropdownTextHighlightStyle={{color:'rgba(42, 130, 228, 1)'}}    //下拉框选中颜色
    onDropdownWillShow={() => {    //按下按钮显示按钮时触发
         this.refs.search.blur();
         this.setState({typeShow:true})
    }}
    onDropdownWillHide={() => this.setState({typeShow:false})}    //当下拉按钮通过触摸按钮隐藏时触发
    onSelect={this._selectType}    //当选项行与选定的index 和 value 接触时触发
>
    <Text>{typeText}</Text>
</ModalDropdown>

// 状态选择
    _selectStatus = (index,value) => {
        // this.refs.search.blur()
        this.setState({
            statusShow: false,
            statusText: value
        })
    }
    // 分类选择
    _selectType = (index,value) => {
        console.log(index + '--' + value)
        this.setState({
            statusShow: false,
            typeText: value
        })
    }
    // 下拉列表分隔符
    _separator = () => {
        return(
            <Text style={{height:0}}></Text>
        )
    }
    // 状态选择下拉框位置
    _adjustStatus = () => {
        return({
            right: width / 3,
            top: 99,
        })
    }
    // 分类选择下拉框位置
    _adjustType = () => {
        return({
            right: 0,
            top: 99,
        })
    }

猜你喜欢

转载自blog.csdn.net/qq_39910762/article/details/82771108
今日推荐