如何解决panResponder 在屏幕上有两次触摸时继续捕捉
我希望在屏幕上有两次触摸时 panResponder 继续前进并且不要停止但大约半秒后 panResponder 停止并开始滚动 这是我的代码
import {View} from 'native-base';
import React,{Children,useMemo,useState} from 'react';
import {Animated,NativetouchEvent,PanResponder} from 'react-native';
import {getdistance} from '../utils/functions';
interface Props {
opacity: Animated.Value;
}
const PinchZoom: React.FC<Props> = (props) => {
let initialXs: Array<number> = [];
let initialYs: Array<number> = [];
let currentXs: Array<number> = [];
let currentYs: Array<number> = [];
const resetAnimation = () => {
Animated.spring(props.opacity,{
tovalue: props.opacity,useNativeDriver: false,}).start();
};
const panResponder = useMemo(
() =>
PanResponder.create({
onStartShouldSetPanResponder: (event) => {
let touches = event.nativeEvent.touches;
if (touches.length == 2) {
return true;
} else {
return false;
}
},onPanResponderStart: (initial_event,initial_gesture) => {
let touches = initial_event.nativeEvent.touches;
if (touches.length == 2) {
initialXs = [];
initialYs = [];
initialXs.push(touches[0].locationX);
initialXs.push(touches[1].locationX);
initialYs.push(touches[0].locationY);
initialYs.push(touches[1].locationY);
}
},onMoveShouldSetPanResponder: () => true,onPanResponderMove: (event,gesture) => {
let touches = event.nativeEvent.touches;
if (touches.length == 2) {
currentXs = [];
currentYs = [];
currentXs.push(touches[0].locationX);
currentXs.push(touches[1].locationX);
currentYs.push(touches[0].locationY);
currentYs.push(touches[1].locationY);
}
console.log('Xs',initialXs,currentXs);
console.log('Ys',initialYs,currentYs);
},onPanResponderRelease: (event,gesture) => {
let touches = event.nativeEvent.touches;
console.log('Xs',currentYs);
if (touches.length == 2) {
console.log('Xs',currentXs);
console.log('Ys',currentYs);
}
},}),[],);
return (
<Animated.View {...panResponder.panHandlers}>
{props.children}
</Animated.View>
);
};
export default PinchZoom;
我希望当屏幕上有两次触摸时 panResponder 启动,直到有两次触摸它继续,当有一次触摸时它停止
解决方法
我用下面的代码临时解决了这个问题
import {Text} from 'native-base';
import React,{useState} from 'react';
import {Animated,Dimensions,PanResponder} from 'react-native';
import {getDistance} from '../utils/functions';
const WINDOW_WIDTH = Dimensions.get('screen').width;
const WINDOW_HEIGHT = Dimensions.get('screen').height;
interface Props {
distance: Animated.Value;
}
const PinchZoom: React.FC<Props> = (props) => {
let initialXs: Array<number> = [];
let initialYs: Array<number> = [];
let currentXs: Array<number> = [];
let currentYs: Array<number> = [];
let distance = props.distance;
let zIndex: number = 0;
let initial_distance: number = 0;
let current_distance: number = 0;
const panResponder = useState(() =>
PanResponder.create({
onStartShouldSetPanResponder: (event,gesture) => {
let touches = event.nativeEvent.touches;
if (gesture.numberActiveTouches == 2) {
zIndex = 2;
return true;
} else {
zIndex = 0;
return false;
}
},onPanResponderStart: (initial_event,initial_gesture) => {
let touches = initial_event.nativeEvent.touches;
initialXs = [];
initialYs = [];
initialXs.push(touches[0].locationX);
initialXs.push(touches[1].locationX);
initialYs.push(touches[0].locationY);
initialYs.push(touches[1].locationY);
},onPanResponderGrant: () => {
initialXs = initialXs;
initialYs = initialYs;
currentXs = currentXs;
currentYs = currentYs;
},onPanResponderMove: (event,gesture) => {
let touches = event.nativeEvent.touches;
if (touches.length == 2) {
currentXs = [];
currentYs = [];
currentXs.push(touches[0].locationX);
currentXs.push(touches[1].locationX);
currentYs.push(touches[0].locationY);
currentYs.push(touches[1].locationY);
initial_distance = getDistance(
initialXs[0],initialYs[0],initialXs[1],initialYs[1],);
current_distance = getDistance(
currentXs[0],currentYs[0],currentXs[1],currentYs[1],);
}
props.distance.setValue(initial_distance - current_distance);
},onPanResponderRelease: () => {
zIndex = 0;
},}),)[0];
return (
<Animated.View
style={{
width: WINDOW_WIDTH,height: WINDOW_HEIGHT,zIndex: zIndex,}}
{...panResponder.panHandlers}>
{props.children}
</Animated.View>
);
};
export default PinchZoom;
但是如果有人有更好的答案,我很感激与我分享
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。