美文网首页
iOS原生和 React Native混合开发,侧滑返回手势冲突

iOS原生和 React Native混合开发,侧滑返回手势冲突

作者: 5619c8b6c380 | 来源:发表于2018-11-03 18:25 被阅读142次

    解决思路:原生和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混合开发,侧滑返回手势冲突

          本文链接:https://www.haomeiwen.com/subject/hjzkxqtx.html