react-native - 当我有 PanResponder 时,如何保持滑动以返回?
问题描述
我的组件有效,但它会覆盖react-navigation
的边缘滑动以返回。
如何捕获平移处理程序的“开始”,以免后退手势被覆盖?
import React from 'react'
import { PanResponder, Animated, View } from 'react-native'
class SwipeView extends React.Component{
translateX = new Animated.Value(0);
panResponder = PanResponder.create({
onMoveShouldSetPanResponderCapture: (e, gs) => {
return gs.dx > 0 //only allow right swipes
},
onPanResponderMove: (e, gs) => {
if(gs.dx > 0) { //only allow right swipes
Animated.event([null, {dx: this.translateX}])(e, gs)
}
},
onPanResponderTerminationRequest: (e, gs) => {
return false
},
onPanResponderTerminate: (e, {vx, dx} ) => {
//do nothing
},
onPanResponderRelease: (e, {vx, dx}) => {
Animated.spring(this.translateX, { toValue: 0, bounciness: 8, speed:48, }).start((result) => {
if(dx > 24){
if(this.props.onSwipe) this.props.onSwipe(this.props)
}
});
},
})
constructor(props){
super(props)
}
render(){
return(
<Animated.View
style={{transform: [{translateX: this.translateX}]}} {...this.panResponder.panHandlers}
>
<View>{React.cloneElement(this.props.children, this.props)}</View>
</Animated.View>
)
}
}
export default SwipeView
解决方案
推荐阅读
- sql-server - 如何避免在此 T-SQL 示例中使用游标
- java - 如何在 quarkus 应用程序日志中添加 slf4j 标记
- git - 为什么 git range-diff 不显示提交更改?
- swift - 我需要比较数组中一行中的 3 个元素,但我得到索引超出范围错误
- java - Azure 应用服务中的错误:java.lang.UnsatisfiedLinkError:未能加载所需的本机库
- android - 长图像在颤动中模糊。扑
- python - 更改 PyQt5 窗口标题的外观和自定义窗口标题
- python - 天才感伤分析未给出中性结果
- flutter - 如何从颤动的表单域中获取数组输入?
- html - 链接不会悬停