1. 程式人生 > >react native 下拉選擇

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