Question

我尝试使用Listener实现Backhandler，在 componentWillMount中添加侦听器，在componentWillUnMount中删除侦听器但是当我们推送到其他组件时，不会调用 componentWillUnMount。所以监听器也存在于其他组件中，是否存在react-native-router-flux与tabbar的问题

Answer 1

要使处理器使用集中式配置工作，我通常在名为<AppNavigation> <Router> <Scene key="root"> {/* other scenes */} </Scene> </Router> </AppNavigation>的组件中使用处理程序，该组件是路由器组件的父级。

它看起来像：

import React, {Component} from "react";
import {BackAndroid} from "react-native";
import {Actions} from "react-native-router-flux";

class AppNavigation extends Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        //listens to hardwareBackPress
        BackAndroid.addEventListener('hardwareBackPress', () => {
            try {
                Actions.pop();
                return true;
            }
            catch (err) {
                console.debug("Can't pop. Exiting the app...");
                return false;
            }
        });
    }

    componentWillUnmount(){
        console.log("Unmounting app, removing listeners");
        BackAndroid.removeEventListener('hardwareBackPress');
    }

    render() {
        return this.props.children;
    }
}

export default AppNavigation;

在AppNavigation中处理后退按钮会相对简单：

setTimeout

P.S。不要忘记区分android和iOS，因为我相信iOS没有后退按钮。

如何在react-native-router-flux中使用BackHandler与tabbar

1 个答案: