将滑块设置为初始位置 - React Native

Question

我有一个应用程序，其中有一个共同的滑块来显示2个不同的数据值。还有一个按钮来控制要显示的值（即使用Array1或Array2）。 Slider在来回滑动时正常显示所有值。

当我点击按钮时，我更新state，Render被调用并正确加载从中加载的Array。

问题： Slider从一些随机位置开始。 我想让滑块头回到初始位置。

以下是我的滑块代码，

 <Slider style={styleSliderView.slider}
                minimumValue={0}
                maximumValue={arr.length-1}
                step={1}
                onValueChange={(value)=>this._onValueChange(value)}/>

任何想法。

- JiteshW

Answer 1

这个位置可能不是随机的，它是新的最小/最大范围内的新位置。你需要做的是重置滑块。

你可以尝试两种可能的解决方案：

1）将滑块值保存在状态中，并在按下按钮时将其重置：

<Slider
  value={this.state.value}
  onValueChange={(value) => this.setState({value})}
/>

onButtonPress() {
  this.setState({value: 0});
}

2）使用滑块的ref重置该值：

<Slider
  ref={r => this.slider = r}
/>

onButtonPress() {
  this.slider.setNativeProps({value: 0});
}

- Artal

---

这里可以有动画效果吗？ - Bhumit Mehta

@BhumitMehta 在iOS中，你可以设置一个滑块的值并进行动画处理，但据我所知，RN没有暴露出这样的方法。 - Artal

第一个例子不起作用，因为<Slider>是一个不受控制的组件。第二个例子运行良好。 - rnevius