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

react-native-slidepicker

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

github: https://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 地址。