使用其他组件的解决方案

Question

我的react-native应用程序中有一个滑块组件，使用最小/最大值属性以及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而不是沿着滑块连续移动。提示赞赏！

Answer 1

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

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

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

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

Answer 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> 
  )
}

`

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

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

2 个答案:

使用其他组件的解决方案