反应原生Android Slider不能在设备上垂直滑动
问题描述:
我已使用 0.43
上的Slider
组件使用以下代码。它适用于iOS,因为它有一个很棒的“按钮”供用户持有和拖动。但在Android上它只是一个小点,我发现我无法垂直拖动它(1/10次尝试成功)。相反,我发现“drag”被ScrollView
捕获。帮帮我?反应原生Android Slider不能在设备上垂直滑动
<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' },
],
},
答
为此,您需要覆盖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>