@adamtyler/react-native-scrub 中文文档教程
React Native Scrub
在 Android 上使用 React Native Gesture Handler 的 React Native 数字洗涤器
Install
yarn add react-native-scrub react-native-gesture-handler
cd ios
pod install
，确保 完成集成 react-native-gesture-handler，如果你还没有的话。
How To Use
onUpdate 将返回应该用于更新显示值的每个擦洗。
onChange 将在用户停止擦洗时返回。 这可用于更新显示，并再次更新传递到组件中的值。 如果您以另一种方式调整值，Scrubber 将跳至新值。
min 是允许的最小值
max 是允许的最大值
step 是洗涤器应该如何从 min 到 max。
renderTick 将使用当前索引、步长值调用，并允许您控制每个刻度的呈现方式。 您可以使用提供的或自己编写。
Demo
import React, { useState } from 'react';
import { SafeAreaView, View, Text } from 'react-native';
import { Slider, Tick, CenterLine } from 'react-native-scrub';
const App = () => {
const [display, setDisplay] = useState(50);
const [value, setValue] = useState(50);
return (
<SafeAreaView>
<Text
style={{
paddingVertical: 20,
fontSize: 40,
fontWeight: 'bold',
textAlign: 'center',
}}
>
{display}
</Text>
<Slider
min={10}
max={100}
step={1}
value={value}
onUpdate={v => {
setDisplay(v);
}}
onChange={v => {
setDisplay(v);
setValue(v);
}}
renderTick={tick => <Tick key={tick.index} {...tick} />}
>
<CenterLine
style={{
backgroundColor: 'red',
}}
/>
</Slider>
</SafeAreaView>
);
};
export default App;
React Native Scrub
A React Native number scrubber using React Native Gesture Handler
Install
yarn add react-native-scrub react-native-gesture-handler
cd ios
pod install
On Android, make sure to finish integrating react-native-gesture-handler, if you haven't already.
How To Use
onUpdate will return each scrub which should be used to update a display value.
onChange will return when the user stops scrubbing. This can be used to update the display, and update the value passed into the component again. If you adjust the value another way the Scrubber will spring to the new value.
min is the minimum value that is allowed
max is the maximum value that is allowed
step is how the scrubber should create the range from the min to the max.
renderTick will be called with the current index, step value, and allow you to control how each tick is rendered. You can use the one provided or write your own.
Demo
import React, { useState } from 'react';
import { SafeAreaView, View, Text } from 'react-native';
import { Slider, Tick, CenterLine } from 'react-native-scrub';
const App = () => {
const [display, setDisplay] = useState(50);
const [value, setValue] = useState(50);
return (
<SafeAreaView>
<Text
style={{
paddingVertical: 20,
fontSize: 40,
fontWeight: 'bold',
textAlign: 'center',
}}
>
{display}
</Text>
<Slider
min={10}
max={100}
step={1}
value={value}
onUpdate={v => {
setDisplay(v);
}}
onChange={v => {
setDisplay(v);
setValue(v);
}}
renderTick={tick => <Tick key={tick.index} {...tick} />}
>
<CenterLine
style={{
backgroundColor: 'red',
}}
/>
</Slider>
</SafeAreaView>
);
};
export default App;
