React native uses ModalDropdown to implement a drop-down selection box

Reference blog link: https://blog.csdn.net/qq_39910762/article/details/82771108

1. Install

npm i react-native-modal-dropdown -save

2. Introduce

import ModalDropdown from 'react-native-modal-dropdown';

3. use

<ModalDropdown
		options={type}    //下拉内容数组
		style={styles.dropdown}    //按钮样式
		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.setState({typeShow:true})}}      //按下按钮显示按钮时触发
		onDropdownWillHide={() => this.setState({typeShow:false})}    //当下拉按钮通过触摸按钮隐藏时触发
		onSelect={this._selectType}    //当选项行与选定的index 和 value 接触时触发
		defaultValue={'国内'}>
		<Text style={
   
   {color: '#444'}}>{this.state.areaIndex === '0'?'国内':'国外'}</Text>
</ModalDropdown>

method

// 分类选择
_selectType = (index,value) => {
    console.log(index + '--' + value)
    this.setState({
        areaIndex: index
    })
}
// 下拉列表分隔符
_separator = () => {
    return(
        <Text style={
   
   {height:0}}></Text>
    )
}
// 分类选择下拉框位置
_adjustType = () => {
    return({
        top: 425,
        left: 92
    })
}

constant definition

const type=['国内','国外']

state variable definition

state = {
    areaIndex: '0',
    typeShow: false
}