[原創]自己動手實現React-Native下拉框控件

因項目需要，自己動手實現了一個下拉框組件，最近得空將控件獨立出來開源上傳到了Github和npm。

Github地址（求Star 求Star 求Star 😘）：https://github.com/sohobloo/react-native-modal-dropdown

Github上全英文的readme方便國際友人，這里就寫個中文的吧。

 

react-native-modal-dropdown

---

 

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

 

特點

---

 

• 純JS組件。
• 一份代碼兼容iOS和Android。
• 根據按鈕位置自動調整下拉框彈出位置。
• 零配置。 (當然啦，你不傳選項的話會顯示一個旋轉的菊花)
• 高可定制化。
• 可通過API代碼控制。 (顯示、隱藏和選擇)

 

示例

---

 

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

         

 

安裝

---

 

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)	選擇指定的選項。不會觸發onSelect。

 

后續計划

---

 

受到d-a-n/react-native-modal-picker的啟發，下個版本將實現控件作為容器！逮誰誰懷孕變成下拉框按鈕。

 

---

感謝閱讀