@3beeepb/react-native-range-slider 中文文档教程

发布于 4年前 浏览 20 项目主页 更新于 3年前

react-native-range-slider npm versionNPM

React Native Range Slider 的跨平台(iOS / Android)实现。

Installation

  • npm: npm install --save @3beeepb/react-native-range-slider --save

Usage

RangeSlider 使用 react hooks,因此该组件不适用于 0.59.0 以下的 React Native 版本

  1. 导入库

    import RangeSlider from '@3beeepb/react-native-range-slider';
    
  2. 只需像这样使用它:

  • Handler callback

    const handleValueChange = useCallback((low, high, isUpdate) => {
      if (isUpdate) {
        setLow(low);
        setHigh(high);
      }
    }, []);
    const handleChange = useCallback(() => {
      // release thumb
    }, []);
    
  • JSX

    <Slider
      style={styles.slider}
      min={0}
      max={100}
      onChange={handleChange}
      onValueChanged={handleValueChange}
    />
    

Properties

NameDescriptionTypeDefault Value
minMinimum value of slidernumberrequired
maxMaximum value of slidernumberrequired
stepStep of slidernumber1
lowLow value of slidernumberInitially min value will be set if not provided
highHigh value of slidernumberInitially max value will be set if not provided
floatingLabelIf set to true, labels will not take space in component tree. Instead they will be rendered over the content above the slider (like a small popup).booleanfalse
disableRangeSlider works as an ordinary slider with only one control if truebooleanfalse
disabledAny user interactions will be ignored if truebooleanfalse
allowLabelOverflowIf set to true, labels are allowed to be drawn outside of slider component's bounds.
Otherwise label's edges will never get out of component's edges.
booleanfalse
renderThumbShould render the thumb.() => Nodeundefined
renderRailShould render the "rail" for thumbs.
Rendered component should have flex: 1 style so it won't fill up the whole space.
() => Nodeundefined
renderRailSelectedShould render the selected part of "rail" for thumbs.
Rendered component should not have flex: 1 style so it fills up the whole space.
() => Nodeundefined
renderLabelShould render label above thumbs.
If no function is passed, no label will be drawn.
(value: number) => Nodeundefined
renderNotchShould render the notch below the label (above the thumbs).
Classic notch is a small triangle below the label.
If allowLabelOverflow is not set to true, the notch will continue moving with thumb even if the label has already reached the edge of the component and can't move further.
() => Nodeundefined
onValueChangedWill be called when a value was changed.
If disableRange is set to true, the second argument should be ignored.
isUpdate will be true if the value was changed by user's interaction.
(low: number, high: number, isUpdate: boolean) => voidundefined
onChangedWill be called when a user release thumb.() => voidundefined

所有其他道具(例如样式)将传递给根容器组件。

Contribution

请确保在通过运行 npm test 提出 PR 之前运行测试。

react-native-range-slider npm versionNPM

A cross-platform (iOS / Android) implementation of Range Slider for React Native.

Installation

  • npm: npm install --save @3beeepb/react-native-range-slider --save

Usage

RangeSlider uses react hooks, so this component doesn't work with React Native versions below 0.59.0

  1. Import the library

    import RangeSlider from '@3beeepb/react-native-range-slider';
    
  2. Just use it like this:

  • Handler callback

    const handleValueChange = useCallback((low, high, isUpdate) => {
      if (isUpdate) {
        setLow(low);
        setHigh(high);
      }
    }, []);
    const handleChange = useCallback(() => {
      // release thumb
    }, []);
    
  • JSX

    <Slider
      style={styles.slider}
      min={0}
      max={100}
      onChange={handleChange}
      onValueChanged={handleValueChange}
    />
    

Properties

NameDescriptionTypeDefault Value
minMinimum value of slidernumberrequired
maxMaximum value of slidernumberrequired
stepStep of slidernumber1
lowLow value of slidernumberInitially min value will be set if not provided
highHigh value of slidernumberInitially max value will be set if not provided
floatingLabelIf set to true, labels will not take space in component tree. Instead they will be rendered over the content above the slider (like a small popup).booleanfalse
disableRangeSlider works as an ordinary slider with only one control if truebooleanfalse
disabledAny user interactions will be ignored if truebooleanfalse
allowLabelOverflowIf set to true, labels are allowed to be drawn outside of slider component's bounds.
Otherwise label's edges will never get out of component's edges.
booleanfalse
renderThumbShould render the thumb.() => Nodeundefined
renderRailShould render the "rail" for thumbs.
Rendered component should have flex: 1 style so it won't fill up the whole space.
() => Nodeundefined
renderRailSelectedShould render the selected part of "rail" for thumbs.
Rendered component should not have flex: 1 style so it fills up the whole space.
() => Nodeundefined
renderLabelShould render label above thumbs.
If no function is passed, no label will be drawn.
(value: number) => Nodeundefined
renderNotchShould render the notch below the label (above the thumbs).
Classic notch is a small triangle below the label.
If allowLabelOverflow is not set to true, the notch will continue moving with thumb even if the label has already reached the edge of the component and can't move further.
() => Nodeundefined
onValueChangedWill be called when a value was changed.
If disableRange is set to true, the second argument should be ignored.
isUpdate will be true if the value was changed by user's interaction.
(low: number, high: number, isUpdate: boolean) => voidundefined
onChangedWill be called when a user release thumb.() => voidundefined

All the other props (e.g. style) will be passed to root container component.

Contribution

Please make sure to run the tests before proposing a PR by running npm test.

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文