React Native
Step 1::
npm i react-native-scroll-ruler --save
or
yarn add react-native-scroll-ruler
Step 2:
react-native link react-native-scroll-ruler
That's all!
import RNScrollRuler from 'react-native-scroll-ruler'; <RNScrollRuler style={{width: Util.size.width - 20, height: 100, backgroundColor: '#fff'}} ref={(view) => { }} minValue={30} maxValue={180} step={1} num={10} unit={"kg"} defaultValue={this.state.defaultWeight} onSelect={(value) => { this.setState({weight: value}); }} isTime={false} markerTextColor={"#ffffff"} markerColor={"#ff8d2a"} ></RNScrollRuler> <RNScrollRuler style={{width: Util.size.width - 20, height: 100, backgroundColor: '#fff'}} ref={(view) => { }} minValue={120} maxValue={250} step={1} num={10} unit={"cm"} defaultValue={this.state.defaultHeight} onSelect={(value) => { this.setState({height: value}); }} isTime={false} markerTextColor={"#ffffff"} markerColor={"#ff8d2a"} ></RNScrollRuler>| Prop | Description | Type | Required |
|---|---|---|---|
| minValue | 尺子显示的最小值 | number | Y |
| maxValue | 尺子显示的最大值 | number | Y |
| defaultValue | 尺子默认值 | number | Y |
| step | 两个大刻度之间的数值间隔 | number | Y |
| num | 两个小刻度之间的数值间隔 | number | Y |
| unit | 单位 | string | N |
| Method | Description |
|---|---|
| onSelect | 选中值后的回调方法 |