我试图了解如何使用Panresponder。我正在尝试创建一个“十字线”,该十字线会在用户单击的任何位置显示。我希望它可以跟随用户的手指,但是现在我什至无法使其显示在用户点击的位置。现在,它可以正常工作,但是X,Y值已关闭。我不明白我在做什么错。
我将初始偏移量设置为x:0和y:0,因为我不在乎上一个用户单击的位置。 我已经尝试过使用locationX / locationY或pageX / pageY或gesture.x0 / gesture.y0的每种组合。
即使很奇怪,在Ive包含panhandlers的框中至少单击了一次之后,我也可以单击框下面的按钮来启动panhandlers。如果我在首次单击框内部之前先单击框外的框,则不会调用panhandler。
任何帮助都会很棒
主文件
if
Line.js
import Line from '../components/Line';
const {width, height} = Dimensions.get('window');
const PanResponderComp = () => {
const pan = useState(new Animated.ValueXY())[0];
const [opacity, setOpacity] = useState(0);
const panResponder = useState(
PanResponder.create({
onStartShouldSetPanResponder: () => true,
// onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: (e, gesture) => {
const {locationX, locationY} = e.nativeEvent;
console.log(locationX);
console.log(locationY);
pan.setOffset({x: 0, y: 0});
pan.setValue({
x: locationX,
y: locationY,
});
setOpacity(1);
},
// onPanResponderMove: (e, gesture) => {
// pan.x.setValue(gesture.dx);
// pan.y.setValue(gesture.dy);
// },
onPanResponderRelease: () => {
console.log('RELEASED');
// pan.flattenOffset();
setOpacity(0);
},
}),
)[0];
return (
<View style={styles.container}>
<View style={styles.chartContainer}>
<Animated.View
{...panResponder.panHandlers}
style={[
{borderWidth: 2, borderColor: 'green'},
StyleSheet.absoluteFill,
]}>
<Animated.View
style={{
transform: [{translateX: pan.x}],
opacity: opacity,
...StyleSheet.absoluteFill,
}}>
<Line y={height} x={0} />
</Animated.View>
<Animated.View
style={{
transform: [{translateY: pan.y}],
opacity: opacity,
...StyleSheet.absoluteFill,
}}>
<Line x={width} y={0} />
</Animated.View>
</Animated.View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
},
titleText: {
fontSize: 14,
lineHeight: 24,
fontWeight: 'bold',
},
chartContainer: {
width: 400,
height: 400,
borderWidth: 1,
borderColor: 'orange',
},
});
export default PanResponderComp;
答案 0 :(得分:0)
弄清楚了。我包装在这两个组件中的Animated.View没有设置宽度/高度,因此它是从容器继承来的。这意味着我可以看到虚线,但是确实有一个巨大的盒子正在移动。在每个Animated.View上设置高度/宽度后,我就可以使点击点起来