iOS原生和 React Native混合开发,侧滑返回手势冲突解决方案(react-navigation)

解决思路:原生和reactNative都支持侧滑返回所以才会造成冲突,经测试把原生的侧滑返回禁止掉,react-native界面就可以正常侧滑返回。基于这个思路,我们首先在原生写一个react-native可以调用的方法,

  RCT_EXPORT_METHOD(setNavSwipe:(BOOL)canswipe){
    
    dispatch_async(dispatch_get_main_queue(), ^{
        //获取当前显示的navigationController 然后根据RN那边传过来的canswipe参数决定是否禁止侧滑返回
         [self getCurrentVC].navigationController.interactivePopGestureRecognizer.enabled = canswipe;
    });
    
}

好了,原生方法已经写好了,我们原生跳react-native的时候会创建一个react-navigation,然后设置一个根界面,然后在这个根界面的 componentDidMount()方法中注册两个react-navigation的监听。

 componentDidMount() {
        
        this.viewDidAppear = this.props.navigation.addListener( //类似OC里的 viewDidAppear方法
            'didFocus',// 有4个取值 willFocus即将显示、didFocus完成显示、willBlur即将消失、didBlur消失
            (obj)=>{
                var baseModule = NativeModules.XQCBaseModule;
                  baseModule.setNavSwipe(true);
            }
        ) 

        this.viewWillDisappear = this.props.navigation.addListener(//类似OC里的 viewWillDisappear方法
            'willBlur', // 有4个取值 willFocus即将显示、didFocus完成显示、willBlur即将消失、didBlur消失
            (obj)=>{
                var baseModule = NativeModules.XQCBaseModule;
                  baseModule.setNavSwipe(false);
            }
        )
    }

componentWillUnmount() {   // 移除监听
     
        this.viewDidAppear.remove();
        this.viewWillAppear.remove();
    }

这样就做到了在react-native中的第一个界面时原生的侧滑返回有效,其它界面原生的侧滑返回都被禁止掉了。

你可能感兴趣的:(iOS原生和 React Native混合开发,侧滑返回手势冲突解决方案(react-navigation))