react native 下拉選擇
阿新 • • 發佈:2018-11-26
<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, }) }