<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,
})
}
react native 下拉选择
猜你喜欢
转载自blog.csdn.net/qq_39910762/article/details/82771108
今日推荐
周排行