react native 下拉选择

推荐使用: 

https://docs.nativebase.io/Components.html#picker-def-headref(nativebase官网)

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

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

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

 {    //按下按钮显示按钮时触发
         this.refs.search.blur();
         this.setState({typeShow:true})
    }}
    onDropdownWillHide={() => this.setState({typeShow:false})}    //当下拉按钮通过触摸按钮隐藏时触发
    onSelect={this._selectType}    //当选项行与选定的index 和 value 接触时触发
>
    {typeText}


// 状态选择
    _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(
            
        )
    }
    // 状态选择下拉框位置
    _adjustStatus = () => {
        return({
            right: width / 3,
            top: 99,
        })
    }
    // 分类选择下拉框位置
    _adjustType = () => {
        return({
            right: 0,
            top: 99,
        })
    }

 

你可能感兴趣的:(react,native)