【问题标题】：How can I create a discrete slider in react-native (iOS)?如何在 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，而不是沿着滑块连续移动。提示赞赏！

【问题讨论】：

标签： ios react-native

【解决方案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> 
  )
}

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

【讨论】：

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