我正在尝试实现我自己的 react-native swiper 组件,但是当在 Animated.View 中添加 TouchableOpacity 时,swiper 立即停止工作。我认为 Touchable 将成为响应者,而我自己的 panResponder 将无法工作。 (你可以看到压制的不透明度)
问题是我希望 touchable 能够工作,但是如果对屏幕的触摸不是轻轻一按而是拖动,那么我希望 swiper 能够工作。 (此行为在使用带有 Touchables 的 scrollView 时有效)
这里:Make TouchableOpacity not highlight element when starting to scroll [React Native]
据说:“滚动手势应该取消 TouchableOpacity 触摸响应器”但是这是怎么做的呢?
出于测试目的,我尝试使用以下方法捕获对我的 Animated.View 的响应者:
onStartShouldSetResponderCapture: () => true,
但这似乎没有效果(我原以为这样滑动会起作用,但可触摸不起作用)。
这是示例代码(如果您将 TouchableOpacity 更改为查看滑动是否有效):
import React, { Component } from 'react';
import { View, Animated, PanResponder, Dimensions, TouchableOpacity, Text } from 'react-native';
class App extends Component {
componentWillMount() {
const position = new Animated.ValueXY();
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: (event, gesture) => {
position.setValue({ x: gesture.dx, y: 0 })
},
onPanResponderRelease: (event, gesture) => {
Animated.spring(this.state.position, {
toValue: { x: 0, y: 0 }
}).start();
}
});
this.state = { panResponder, position };
}
render() {
return (
<Animated.View style={[this.state.position.getLayout(), styles.viewStyle]} {...this.state.panResponder.panHandlers}>
<TouchableOpacity style={styles.touchableStyle}>
<Text>Swipe not working</Text>
</TouchableOpacity>
</Animated.View>
);
}
}
const styles = {
viewStyle: {
position: 'absolute',
top: 0,
bottom: 0,
width: Dimensions.get('window').width
},
touchableStyle: {
backgroundColor: '#ddd',
height: 100,
borderWidth: 5,
borderColor: '#000',
justifyContent: 'center',
alignItems: 'center'
}
};
export default App;
如果您有解决方案,请帮助我。我已经尝试让它工作一段时间了。
最佳答案
它设法解决了这个问题:
onStartShouldSetPanResponder: () => true
必须替换为:
onMoveShouldSetPanResponder: () => true
opacity hihglighting 仍然存在同样的问题,但这不是什么大问题。
Make TouchableOpacity not highlight element when starting to scroll [React Native]
关于react-native - 触摸拖动而不是按下时如何取消TouchableOpacity响应器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46200549/