android - React Native Android Slider 无法在设备上垂直滑动

Question

我使用以下代码在 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' },
    ],
  },

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