在一次生產項目里,某位React Native開發者被現實逼急了:他需要一個既優雅又可靠的滾輪選擇器,就像iOS系統里那種讓人忍不住來回搓的柱狀滾輪。結果試遍了現有輪子,他發現一堆共同的毛病:倉庫年久失修、不支持新架構、全靠JS模擬滾動物理,要么干脆缺東少西。于是他一咬牙,從零搞出了react-native-drum-picker。
這個選擇器的核心訴求很直白——把真正的原生體驗還給用戶。在Android端,它不是JS里搞一個ScrollView再模擬吸附效果,而是直接用上了Kotlin寫的RecyclerView配合LinearSnapHelper;iOS端則老老實實調用UIPickerView。這兩種都是用戶手指摩擦了千萬遍的平臺原生組件,動量、微吸附、慣性滾動全都長在系統里,JS模擬根本做不到那個味道。更關鍵的是,它完全擁抱了React Native新架構(Fabric),這也是目前市面上唯一做到這一點的輪子。
![]()
拆開它的“一圖讀懂”說明書,我們先看最基礎的樣子:傳入一個數組,綁定選中索引,就能獲得一個直接可用的普通列表選擇器。但故事沒這么簡單。它內置的DateDrumPicker可以直接按日-月-年模式生成日期滾輪,并且能用minDate和maxDate牢牢卡住范圍,省去自己算閏年、校驗日期的麻煩。
再往右劃,是自定義渲染的能力。如果你想給每個選項加國旗emoji、圖標或者按選中狀態變色,一個renderItem就搞定了。比如一段國家列表,未選中的字是淺灰,選中后立刻變黑加粗,旁邊還飄著一面小旗,這可比單調的純文本有呼吸感多了。
真正讓人拍腿的是PickerGroup這套組合拳。用usePickerGroup把多個滾輪串成一個群組,再用usePickerGroupChangedEffect監聽任意滾輪停穩后的回調——比如滾動月份后,自動根據月天數刷新日期上限;還能一邊滾動一邊用usePickerGroupChangingEffect拿預覽值,做出實時聯動的效果。再也不會出現選了2月還讓你挑31號的尷尬。
所以你看,這不是又一個“夠用就行”的社區庫,而是沖著填補生態缺口去的:原生引擎、新架構支持、十多項開箱即用的功能,并且零妥協。對于那些還在用JS假滾動湊合的React Native項目來說,這個自研的鼓輪子,可能正好就是那個值得換上的真家伙。
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布,本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.