ReactNative版滑动刻度尺,兼容Android和iOS。
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});
}}
></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});
}}
></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 | 选中值后的回调方法 |