前言

一个下拉框组件：

• github：https://github.com/sohobloo/react-native-modal-dropdown
• npm: https://www.npmjs.com/package/react-native-modal-dropdown

---

react-native-modal-dropdown

一个react-native的下拉框组件，支持安卓和iOS。

特点

• 纯JS组件。
• 一份代码兼容iOS和Android。
• 根据按钮位置自动调整下拉框弹出位置。
• 零配置。 (当然啦，你不传选项的话会显示一个旋转的菊花)
• 高可定制化。
• 可通过API代码控制。 (显示、隐藏和选择)

示例

在example里可以找到示例代码。

image image image

安装

npm i react-native-modal-dropdown --save

使用

基本

先Import组件:

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

作为组件使用即可:

<ModalDropdown options={['option 1', 'option 2']}/>

自定义

可以通过传入以下样式属性来自定义样式:

• style: 改变按钮的样式。
• textStyle: 改变按钮文字样式。
• dropdownStyle: 改变下拉框的样式。

可以通过实现renderRow方法来自定义下拉框中的选项行。

API

属性（Props）

Prop	Type	Optional	Default	Description
disabled	bool	Yes	false	是否禁用组件
defaultIndex	number	Yes	-1	初始选择。 -1: 未选中。这个只会影响选项展示的高亮与否，不会改变初始的按钮文字。若要改变按钮初始文字请参考defaultValue。
defaultValue	string	Yes	Please select...	按钮初始文字。
options	arrayOf(string)	Yes		选项。 传null/undefined则下拉框会显示一个加载图标。
style	object	Yes		按钮样式。
textStyle	object	Yes		按钮文字样式。
dropdownStyle	object	Yes		下拉框样式。
renderRow	func	Yes		自定义选项行的渲染。传null/undefined会使用默认的行渲染。
onDropdownWillShow	func	Yes		下拉框显示前触发。 若实现此方法并返回false可以阻止显示。
onDropdownWillHide	func	Yes		下拉框隐藏前触发。若实现此方法并返回false可以阻止隐藏。
onSelect	func	Yes		选择选项时触发并返回index和value。若实现此方法并返回false可以阻止选择。

方法

Method	Description
updatePosition()	手动更新下拉框位置。如果控件放在scroll view里面，需要在scrollView的onScroll方法中调用此方法。
show()	显示下拉框。不会触发onDropdownWillShow。
hide()	隐藏下拉框。不会触发onDropdownWillHide。
select(idx)	选择给定索引（idx）的选项。不会触发onSelect。