前言
一個下拉框組件：
- 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。
|
