2017-06-02 4 views
2

SliderコンポーネントをReact Native0.43に使用しました。次のコードを使用しています。それは、ユーザーが保持してドラッグするための素晴らしい "ボタン"を持っているので、iOSではうまく動作します。しかしアンドロイドではちょっと小さな点で、縦にドラッグできないことが分かりました(1/10回の試行は成功です)。私は、 "ドラッグ"が代わりにバックグラウンドでScrollViewによってキャプチャされることがわかります。助けて?ネイティブAndroidスライダーがデバイス上で垂直にスライドできない

 <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' }, 
    ], 
    }, 

vertical slider

答えて

1

Sliderの場合はPanResponderを上書きする必要があります。何らかの理由で、Androidが垂直に回転しても、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 
    }) 
} 

そして、単にSliderPanHandlerを適用します。

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

これはそれにその厄介なScrollView以上の絶対的な優先順位を与えます。

Sliderが使用されているときに、ScrollViewを垂直方向にパンするのをやめるのがベストプラクティスです。両方のコンポーネントをすばやく連続してドラッグしたときに発生することがあります。

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

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

</ScrollView> 
0

私が代わりにreact-native-sliderを使用することにしましたので、実際のiOSデバイス上で奇妙な行動react-nativeのスライダー成分といくつかの問題がありました。

関連する問題