react navigation中TabNavigator conflict gesture!

发布于 2022-09-05 04:28:47 字数 2587 浏览 13 评论 0

github issue
实际效果:
27945980-1d5f2298-6322-11e7-9fb5-6e4dc3ec1bb5.gif

想要的效果:
27945622-64d7a1b0-6320-11e7-8e8a-63ceadda7fee.gif

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

陌路终见情 2022-09-12 04:28:47

我不想禁用swipeEnabled 在滑动时优先子view 如果子view不响应 则tab在滑动

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文