Question

我的滑块视图使用 rn-range-slider 库。滑动 rn-range-slider 后，我想将滑块重置到其原始位置，我尝试清除状态，但滑块保持不变，有什么线索可以解决这个问题吗？

<RangeSlider     
     rangeEnabled={true}
     style={{width: '95%', height: 60, bottom: 20}}
     gravity={'center'}
     min={0}
     max={10000}
     step={20}
     selectionColor="#B20C11"
     blankColor="#F2F0F1"
     onValueChanged={(low, high, fromUser) => {
       minValue = low;
       maxValue = high;
     }}
/>

Answer 1

您还必须添加高属性和低属性。这就是 RangeSlider 元素将如何识别它分配的值。当你改变 state 的值时，那些低值和高值应该分配给元素的低和高属性。

<RangeSlider
    style={styles.slider}
    min={0}
    max={100}
    step={1}
    floatingLabel
    renderThumb={renderThumb}
    renderRail={renderRail}
    renderRailSelected={renderRailSelected}
    renderLabel={renderLabel}
    renderNotch={renderNotch}
    low={this.state.low}
    high={this.state.high}
    onValueChanged={handleValueChange}
  />

然后当您重置低值和高值时，组件将重新渲染并重置为初始值。

如何将本机 rn-range-slider 反应重置为其初始状态

1 个答案: