如何在react native（iOS）中创建离散滑块？

我的react原生应用程序中有一个滑块组件，使用最小值/最大值属性和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> 

{this.state.value}
{
这是我的国家({
值：Math.round（值）
});
}}
/>

---

我想要的是滑块手柄按钮捕捉到离散位置1,2,3,4,5，而不是沿着滑块连续移动。谢谢

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

值数字

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

这不是受控组件，例如，如果不更新 值时，组件将不会重置为其初始值

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

使用其他组件的解决方案 然而，有一个JavaScript版本，让我们来实现它。因为它使用了SliderIOS的一些道具，所以您可以轻松地更换它。只需加载npm模块，需要它并将

更改为

。现在，您需要对当前代码进行一些调整：

组件的属性

值

应引用可由代码更改的变量。您可以使用

getInitialState

来设置默认值

将用于

onValueChange

的回调函数添加到

onSlidingComplete

。否则，在释放滑块时，两者之间仍可能存在值

我使用sliderValue而不是value来让它更清晰

`

getInitialState（）{
返回{
sliderValue:1
}
},
onSliderValueChange（值）{
这是我的国家({
sliderValue:Math.round（值）
});
},
render（）{
返回(
{this.state.sliderValue}
)
}

`

---

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

供将来参考：SliderIOS在此期间已被弃用，应该使用Slider组件<代码>附带步骤属性：

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

因此，解决具体问题的办法是简单地设置

<Slider
    step={1}
    ...
/>

---

谢谢您的帮助。今晚我要试一试，并做相应的标记。

<Slider
    step={1}
    ...
/>