react native 下拉选择

最新推荐文章于 2024-08-10 08:10:06 发布

qq_39910762

最新推荐文章于 2024-08-10 08:10:06 发布

阅读量8.8k

点赞数 1

分类专栏： react native 文章标签： react native 下拉框

本文链接：https://blog.csdn.net/qq_39910762/article/details/82771108

版权

react native 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

https://akveo.github.io/react-native-ui-kitten/#/docs/ui-components/rkpicker （react-native-ui-kitten官网）

下面使用的是: react-native-modal-dropdown

具体用哪个各位可以自行体验

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