react navigation中TabNavigator conflict gesture!
github issue
实际效果:
想要的效果:
constructor(props) {
super(props);
this.state = { trans: new Animated.ValueXY({ x: 0, y: 0 }), };
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true, // 响应手势
onStartShouldSetResponderCapture: () => true,
onMoveShouldSetPanResponder: () => true,
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderMove: Animated.event(
[null, { dx: this.state.trans.x, dy: this.state.trans.y }] // 绑定动画值
),
onPanResponderRelease: () => { // 手松开,回到原始位置
Animated.spring(this.state.trans, { toValue: { x: 0, y: 0 } }
).start();
},
onPanResponderTerminate: () => { // 手势中断,回到原始位置
Animated.spring(this.state.trans, { toValue: { x: 0, y: 0 } }
).start();
},
onResponderTerminationRequest: () => false
});
this.state.trans.addListener(this.animateListener);
}
render() {
return (
<View style={[styles.container, { backgroundColor: 'blue' }]}>
<Animated.View
style={{ width: 100,
height: 100,
backgroundColor: 'red',
transform: [
{ translateY: this.state.trans.y },
{ translateX: this.state.trans.x },
],
}}
{...this._panResponder.panHandlers}
/>
);
}
tab:
const TabContainer = TabNavigator(
{
...ROUTER
},
{
lazy: true,
swipeEnabled: true,
tabBarPosition: 'bottom',
animationEnabled: true,
tabBarOptions: {
activeTintColor: '#3e9ce9',
inactiveTintColor: '#999999',
showIcon: true,
style: {
backgroundColor: '#fff'
},
indicatorStyle: {
opacity: 0
},
tabStyle: {
padding: 0
}
}
}
);
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我不想禁用swipeEnabled 在滑动时优先子view 如果子view不响应 则tab在滑动