React Native Android Slider 无法在设备上垂直滑动答案

【问题标题】：React Native Android Slider cannot slide vertically on deviceReact Native Android Slider 无法在设备上垂直滑动
【发布时间】：2017-06-02 04:54:47
【问题描述】：

我使用以下代码在React Native 0.43 上使用了Slider 组件。它适用于 iOS，因为它有一个不错的大“按钮”供用户按住和拖动。但在 android 上它只是一个小点，我发现我无法垂直拖动它（1/10 尝试成功）。我发现“拖动”被ScrollView 在后台捕获。帮忙？

      <Slider
        minimumValue={minValue}
        maximumValue={maxValue}
        step={step}
        style={styles.slider}
        value={parseInt(input.value)}
        onSlidingComplete={onSlidingComplete}
        onValueChange={onValueChange}
      />

  slider: {
    marginRight:-100,
    marginLeft:-100,
    width:250,
    transform: [
      { rotateZ : '-90deg' },
    ],
  },

【问题讨论】：

标签： android react-native slider

【解决方案1】：

为此，您需要为Slider 覆盖PanResponder。出于某种原因，Android 在垂直旋转时无法很好地应对。

componentWillMount () {
    this._panResponder = PanResponder.create({
      // Ask to be the responder:
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true
    })
}

然后只需将PanHandler 应用于Slider：

<Slider
    {...this._panResponder.panHandlers}
    ... />

这使它绝对优先于讨厌的ScrollView。

此外，最佳做法是在使用 Slider 时完全阻止 ScrollView 垂直平移，这有时会在您快速连续拖动两个组件时发生。

<ScrollView scrollEnabled={!this.state.sliding}>

    <Slider
        onValueChange={() => {
          this.setState({
            sliding: true
          })
        }}
        onSlidingComplete={() => {
          this.setState({
            sliding: false
          })
        }}
      ... />

</ScrollView>

【讨论】：

【解决方案2】：

react-native 的滑块组件在真实的 iOS 设备上表现怪异，因此我选择使用 react-native-slider。

【讨论】：