react-native-dropdown-select
Version:
129 lines (111 loc) • 6.41 kB
Markdown
select
<p>
<img src ="./showImg/selMul.png"
height="auto" width="400" />
<img src ="./showImg/selSig.png"
height="auto" width="400"/>
</p>
```javascript
import {
DropdownBox,
ButtonImage,
Button,
PickDropdown
} from "react-native-dropdown-select";
/**
单选
**/
<PickDropdown options={this.state.typesList}
style={styles.dropdwon}
onSelect={(v)=>this.onSelectDrop(v)}
defaultValue={"请选择客户"}/>
/**
多选
**/
<PickDropdown options={this.state.typesList}
multiple={true}
style={styles.dropdwon}
onSelect={(v)=>this.onSelectDrop(v)}
defaultValue={"请选择客户"}/>
/**
图片按钮
**/
<ButtonImage icon={TriangleDown}
disabled={disabled}
style={[styles.searchIcon,{
width:this.getStyle().height == undefined
? this.getStyle(styles.searchIcon).height
: this.styles.height,
height:this.styles.height,
}]}
iconStyle={[
{
width:this.styles.height,
height:this.styles.height,
},
styles.icon,
this.getIconStyle()
]}
onPress={this._onBtnImgPress}/>
/**
按钮
**/
<Button style={styles.multipleBtn}
textStyle={styles.multipleBtnText}
onPress={()=>this._onMultiplePress()}
text={"确定"}/>
```
<img src="./showImg/demo_1.gif"
width = "160" height = "287.5"
alt="Demo 1"/><img src="./showImg/demo_2.gif"
width = "160" height = "287.5"
alt="Demo 2"/><img src="./showImg/demo_3.gif"
width = "160" height = "287.5"
alt="Demo 3"/>
You can also render your option row and row separator by implement `renderRow` and `renderSeparator` function.
Give the style props as your choice:
- `style`: Change the style of the button (basic mode) / container (wrapper mode).
- `textStyle`: Change the style of text of the button. *Invalid in wrapper mode.*
- `dropdownStyle`: Change the style of dropdown container.
- `multiple`: Change the style of dropdown container.
##### DropdownBox的api属性
属性 | 类型 | 可选 | 默认值 | 描述
------------------- | -------- | -------- | --------- | -----------
`disabled` | bool | Yes | false | disable / enable the component.
`defaultIndex` | number | Yes | -1 | Init selected index. `-1`: None is selected. **This only change the highlight of the dropdown row, you have to give a `defaultValue` to change the init text.**
`defaultValue` | string | Yes | Please select... | Init text of the button. **Invalid in wrapper mode.**
`options` | array | Yes | | Options. **The dropdown will show a loading indicator if `options` is `null`/`undefined`.**
`animated` | bool | Yes | true | Disable / enable fade animation.
`showsVerticalScrollIndicator` | bool | Yes | true | Show / hide vertical scroll indicator.
`style` | object | Yes | | Style of the button.
`textStyle` | object | Yes | | Style of the button text. **Invalid in wrapper mode.**
`dropdownStyle` | object | Yes | | Style of the dropdown list.
`dropdownTextStyle` | object | Yes | | Style of the dropdown option text.
`dropdownTextHighlightStyle` | object | Yes | | Style of the dropdown selected option text.
`adjustFrame` | func | Yes | | This is a callback after the frame of the dropdown have been calculated and before showing. You will receive a style object as argument with some of the props like `width` `height` `top` `left` and `right`. Change them to appropriate values that accord with your requirement and **make the new style as the return value of this function**.
`renderRow` | func | Yes | | Customize render option rows: `function(option,index,isSelected)` **Will render a default row if `null`/`undefined`.**
`renderSeparator` | func | Yes | | Customize render dropdown list separators. **Will render a default thin gray line if `null`/`undefined`.**
`renderButtonText` | func | Yes | | Use this to extract and return text from option object. This text will show on button after option selected. **Invalid in wrapper mode.**
`onDropdownWillShow`| func | Yes | | Trigger when dropdown will show by touching the button. **Return `false` can cancel the event.**
`onDropdownWillHide`| func | Yes | | Trigger when dropdown will hide by touching the button. **Return `false` can cancel the event.**
`onSelect` | func | Yes | | Trigger when option row touched with selected `index` and `value`. **Return `false` can cancel the event.**
`accessible` | bool | Yes | true | Set accessibility of dropdown modal and dropdown rows
`keyboardShouldPersistTaps` | enum('always', 'never', 'handled') | Yes | 'never' | See react-native `ScrollView` props
`multiple` | bool | Yes | false | Sets single or multiple selections
##### DropdownBox的方法
方法 | 描述
----------------- | -----------
`show()` | Show the dropdown. **Won't trigger `onDropdownWillShow`.**
`hide()` | Hide the dropdown. **Won't trigger `onDropdownWillHide`.**
`select(idx)` | Select the specified option of the `idx`. Select `-1` will reset it to display `defaultValue`. **Won't trigger `onSelect`.**
### 欢迎交流
欢迎提问交流;若有bug,请添加bug截图或代码片段,以便更快更好的解决问题。<br>
欢迎大家一起交流
### [我的博客](http://blog.sina.com.cn/s/articlelist_6078695441_0_1.html)
下拉框组件
npm i --save react-native-dropdown-