React Native選擇器組件-react-native-slidepicker

react-native-slidepicker

一個純 JavaScript 實現的的 React Native 組件,用於如地址,時間等分類數據選擇的場景。

github: //github.com/lexguy/react-native-slidepicker

效果

三輪選擇,選擇級聯地址數據:

(可自定義條目高,選中和非選中條目的背景色,字體顏色和大小)

起因

當前使用的 react-native-picker 組件,雖然並沒有什麼功能上的硬傷,但是在樣式可調性上稍差,而且鑒於該庫的更新都是幾年前了,issue 清理速度慢,所以還是需要備好替代方案。

實現

具體的實現方案,首先考慮到的方案就是ScrollView滑動,然後在滑動離開的時候再定位到鄰近的選擇Item上面。

在使用ScrollView作單個選擇的滑動效果時,發現在上面添加了透明背景色之後,ScrollView獲取不到滑動事件,上層的View攔截掉手勢效果,手動設置不處理手勢,ScrollView 依然不能滑動。

那就只能換一種方式了,那就換手勢實現。

選擇列表根據手勢的滑動做整體transform,根據手勢上下偏移,手勢釋放的時候定位到最近的根據Item高度取整的位置。

在每次手勢停止的時候計算所處的位置,得到在數值列表中的索引,再通過props回調函數傳回結果。如果是級聯列表,需要重置下一選擇輪的數據到初始值。

級聯列表的數據是對象和數組格式的反覆嵌套,可以通過遞歸的方式去讀取,然後在組件內部轉換為扁平的平級數據後生成多個滑動區域和對應的列表數據。

結果

經過調試,終於得到結果,已經放在 Github 上 react-native-slidepicker (包含使用詳情和源碼)

也上傳到 npm 庫,可以直接安裝:

npm install react-native-slidepicker react-native-gesture-handler -S

使用參考 github 地址