[英]How can I create a discrete slider in react-native (iOS)?
I have a slider component in my react-native app that is nicely restricted to discrete values from 1-5 using the minimum/maximumValue properties and some rounding in onValueChange: 我的本机应用程序中有一个滑块组件,该组件很好地限制为使用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>
What I would like is for the slider handle button to snap to the discrete positions 1,2,3,4,5 rather than move continuously along the slider. 我想要的是使滑块手柄按钮捕捉到离散位置1,2,3,4,5,而不是沿滑块连续移动。 Hints appreciated!
提示表示赞赏!
For future reference: SliderIOS has been deprecated in the meantime and one should use the Slider component. 供将来参考:同时不推荐使用SliderIOS,应该使用Slider组件。
<Slider>
comes with a step attribute: <Slider>
带有step属性:
Step value of the slider.
滑块的步长值。 The value should be between 0 and (maximumValue - minimumValue).
该值应介于0到(maximumValue-minimumValue)之间。 Default value is 0.
预设值为0。
So the solution to the specific question would be to simply set 因此,针对特定问题的解决方案是简单地设置
<Slider
step={1}
...
/>
you're almost there but in the docs of SliderIOS it says: 您快要到了,但是在SliderIOS的文档中它说:
value number
值号
Initial value of the slider.
滑块的初始值。 The value should be between minimumValue and maximumValue, which default to 0 and 1 respectively.
该值应介于minimumValue和maximumValue之间,分别默认为0和1。 Default value is 0.
预设值为0。
This is not a controlled component , eg if you don't update the value, the component won't be reset to its inital value.
这不是受控组件 ,例如,如果您不更新该值,则该组件将不会重置为其初始值。
Therefore, it's not possible to control the behavior of the native slider in the way you want it to work. 因此,无法以您希望的方式控制本机滑块的行为。
However, there is a JavaScript version of the <Slider>
component which let's you do it. 但是,有一个
<Slider>
组件的JavaScript版本,您可以使用它。 Since it uses some of the props SliderIOS has, you can easily replace it. 由于它使用了SliderIOS的一些道具,因此您可以轻松地替换它。 Just load the npm module, require it and change
<SliderIOS>
to <Slider>
. 只需加载npm模块,需要它,然后将
<SliderIOS>
更改为<Slider>
。 Now you need to make some adjustments to your current code: 现在,您需要对当前代码进行一些调整:
value
of the component should reference a variable which can be changed by your code. value
应引用一个可由您的代码更改的变量。 You can use getInitialState
to have a default value. getInitialState
来具有默认值。 onValueChange
to onSlidingComplete
. onValueChange
回调函数添加到onSlidingComplete
。 Otherwise you could still have values in between when you release the slider. ` `
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>
)
}
` `
I didn't check my last version the code but it should work like that. 我没有检查我的上一个版本的代码,但它应该可以那样工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.