react-native-scroll-ruler

React Native

Gifs

Get Started

Installation

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!

Usage

Simple

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>

Props

Prop	Description	Type	Required
minValue	尺子显示的最小值	number	Y
maxValue	尺子显示的最大值	number	Y
defaultValue	尺子默认值	number	Y
step	两个大刻度之间的数值间隔	number	Y
num	两个小刻度之间的数值间隔	number	Y
unit	单位	string	N

Methods

Method	Description
onSelect	选中值后的回调方法

License

MIT