使用 react-native router-flux 时,BackHandler 在 react-native 侧面菜单中不起作用

Posted

技术标签:

【中文标题】使用 react-native router-flux 时,BackHandler 在 react-native 侧面菜单中不起作用【英文标题】:BackHandler is not working in react-native side-menu when using react-native router-flux 【发布时间】:2019-04-17 00:06:56 【问题描述】:

我正在使用 react-native 开发示例应用程序。我在 react-native 侧边菜单组件中使用 backHandler 时遇到了一个问题。

实际上,侧边菜单包含更多页面!但是当点击侧面菜单页面中的 android 后退按钮时,只有一次后退处理程序起作用。这里我使用的是 react-native router-flux。

这里的后退按钮动作只被调用一次!

这是我的代码:

componentDidMount() 
    BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);


componentWillUnmount() 
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);


handleBackPress = () => 
    let isGoback = this.props.isGoback
    //alert("Hi " + isGoback)

    if(isGoback === "Contact Us")
        //alert("Hi: " + isGoback)
        Actions.BasicSideMenuMain(selectedItem:'Home');
        //Actions.replace('BasicSideMenuMain')
    

【问题讨论】:

你说的“一旦后面的处理函数调用这里主屏幕是Home”是什么意思?你能解决它吗(通过编辑你的问题,而不是在 cmets 中回复)? 嗨,我不太清楚这个 【参考方案1】:

我遇到了同样的问题,我就是这样解决的: 当您使用 router-flux 时,您可以使用 Actions.currentScene 来查找您所在的页面

handleBackPress = () => 
        if(Actions.currentScene === 'mainPage')   // 'mainPage' is kay of your scene
            BackHandler.exitApp();  // or anything you want
            return false;
         
        Actions.pop();  // for all the pages beside mainPage in side menu always go back
        return true;
    

希望它有效。

【讨论】:

以上是关于使用 react-native router-flux 时,BackHandler 在 react-native 侧面菜单中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

React-native:如何在 React-native 中使用(和翻译)带有 jsx 的 typescript .tsx 文件?

使用 react-native router-flux 时,BackHandler 在 react-native 侧面菜单中不起作用

使用 Formik 的 React-Native 选择器

使用带有样式组件的动画(react-native)

使用 react-native 克隆本机 android 警报屏幕

react-native 依赖错误