react navigation中TabNavigator conflict gesture!

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
                }
            }
        }
    );
阅读 3k
1 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题