如何解决React Native:Panresponder在保持触摸的同时从TouchableHighlight切换到Panresponder
我目前在react native中有一个主要组件,该组件根据应用程序状态呈现两个视图组件之一。第一个是TouchableOpacity气泡,而第二个在此TouchableOpacity的确切位置包含一个外观相似的响应者气泡。
长按第一个TouchableOpacity后,第一个视图向主父组件触发状态更新,然后该主父组件(由于已更新的状态)将呈现第二个视图,即在已放置气泡的位置可拖动的响应者下来。
问题:长按第一个视图中的气泡并渲染第二个视图后,PanResponder无法从第一个视图中拾取触摸。用户被迫从屏幕上松开手指,然后再次按下以开始拖动响应器。这需要以一种平稳的动作发生。如何保存触摸事件,以便第二个视图能够从touchableopacity中检测到已经按下的触摸?
潜在的线程解决方案我已经知道,使用两个可触摸不透明性,可以保留印刷机!我还在下面附上了该实验的代码!长按第一个组件后,第二个可触摸不透明立即变为不透明,并一直保持这种状态,直到释放为止(但是无法调用其onLongPress函数)。
谢谢!
import React,{ useState,useRef } from 'react';
import { View,TouchableOpacity,Animated,PanResponder} from 'react-native';
export default function App() {
var [status,updateStatus] = useState(true)
return (
<View>
{status?
<TouchableOpacity style={{backgroundColor:"red",height:50,width:50,left:150,top:150}}
onLongPress={()=>
{updateStatus(false);
}
}
/>
:
<Bubble updateStatus={(status)=>{updateStatus(true)}}></Bubble>
}
</View>
);
}
export function Bubble(props) {
const pan = useRef(new Animated.ValueXY())
const panResponder = React.useMemo(() => PanResponder.create({
onStartShouldSetPanResponder: (evt,gestureState) => {
return true
},onPanResponderGrant: async (evt,gestureState) => {
pan.current.setOffset(pan.current.__getValue());
pan.current.setValue({ x: 0,y: 0 })
},onPanResponderMove: (evt,gestureState) => {
return Animated.event([
null,{ dx: pan.current.x,dy: pan.current.y }
])(evt,gestureState)
},onPanResponderRelease: async (e,gesture) => {
pan.current.flattenOffset();
Animated.spring(pan.current,{
toValue: { x: 0,y: 0 },friction: 5,}).start(() => {
props.updateStatus(false)
}
);
}
}),[]);
const panStyle = {
transform: pan.current.getTranslateTransform()
}
return (
<View>
<Animated.View
{...panResponder.panHandlers}
style={[panStyle,{
height: 50,width: 50,backgroundColor: "green",position: "absolute",top: 150,left: 150
}]}>
</Animated.View>
</View>
);
}
export default function App() {
var [status,top:150}}
onLongPress={()=>
{updateStatus(false);
}
}
/>
:
<TouchableOpacity style={{backgroundColor:"green",top:150}}
onLongPress={(status)=>{updateStatus(true)}}></TouchableOpacity>
}
</View>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。