如何在 react-native (iOS) 中创建离散滑块？

Posted 2023-03-15

【中文标题】如何在 react-native (iOS) 中创建离散滑块？

【英文标题】：How can I create a discrete slider in react-native (iOS)?

【发布时间】：2015-10-02 16:12:42

【问题描述】：

我的 react-native 应用程序中有一个滑块组件，它使用 minimum/maximumValue 属性和 onValueChange 中的一些舍入很好地限制为 1-5 的离散值：

<View>
    <Text style=styles.text >
      this.state.value
    </Text>
    <Sliderios
      ref='slider'
      style=styles.slider
      value=1
      minimumValue=1
      maximumValue=5
      onValueChange=(value) => 
        this.setState(
          value: Math.round(value)
        );
      
    />
</View> 

我希望滑块手柄按钮捕捉到离散位置 1、2、3、4、5，而不是沿着滑块连续移动。提示赞赏！

【参考方案1】：

供将来参考：SliderIOS 在此期间已被弃用，应该使用 Slider 组件。 <Slider>自带step属性：

滑块的步长值。该值应介于 0 和 (maximumValue - minimumValue) 之间。默认值为 0。

所以具体问题的解决方案是简单地设置

<Slider
    step=1
    ...
/>

【参考方案2】：

你快到了，但在 SliderIOS 的文档中它说：

值数字

滑块的初始值。该值应介于 minimumValue 之间 和maximumValue，分别默认为0和1。默认值 为 0。

这不是一个受控组件，例如如果你不更新 值，组件不会被重置为其初始值。

因此，无法以您希望的方式控制本机滑块的行为。

使用其他组件的解决方案

但是，<Slider> component 有一个 javascript 版本，可以让您执行此操作。由于它使用了 SliderIOS 的一些道具，因此您可以轻松替换它。只需加载 npm 模块，要求它并将<SliderIOS> 更改为<Slider>。现在你需要对你当前的代码做一些调整：

组件的属性value 应该引用一个可以由您的代码更改的变量。您可以使用getInitialState 来设置默认值。 将用于onValueChange 的回调函数添加到onSlidingComplete。否则，当您释放滑块时，您仍然可以在两者之间设置值。 为了更清晰，我使用了 sliderValue 而不是 value。

`

getInitialState() 
    return 
        sliderValue: 1
    
,

onSliderValueChange(value) 
     this.setState(
         sliderValue: Math.round(value)
     );
,

render() 
  return(
    <View>
        <Text style=styles.text >
          this.state.sliderValue
        </Text>
        <Slider
          ref='slider'
          style=styles.slider
          value=this.state.sliderValue
          minimumValue=1
          maximumValue=5
          onValueChange=this.onSliderValueChange
          onSlidingComplete=this.onSliderValueChange
        />
    </View> 
  )

`

我没有检查我的上一个版本的代码，但它应该可以这样工作。

【讨论】：

谢谢。今晚我会试一试并做相应的标记。