react native 实现灵活的滑块组件

1,954 阅读1分钟

react native 实现灵活的滑块组件

组件结构:

image-20210727160057623

滑块底部组件:

image-20210727164026987

PanResponder:

React-native手势处理:参考:reactnative.cn/docs/panres…

image-20210727164057013

LinearGradient:

react-native-linear-gradient 支持渐变颜色的组件

滑块按钮组件:

image-20210727164127105

PanResponder:

image-20210727164207519

滑块加减组件:

image-20210802135639887

完整组件源码:

github.com/john-ui-kit…

实现效果:

Kapture 2021-07-27 at 14.23.05

\