React Navigation Android端 按下返回键

最近的RN项目中页面导航使用的是官方推荐的React Navigation，但是这个库在Android设备上有个bug。如果你没有自定义自己处理Back返回键的点击事件的话你就会发现，当你在列表中点击一个条目跳转到二级页面后按下Back键然后再次点击某个条目再次进入二级页面后二级页面会立马闪退，退回到原来的列表页面。不知道我这么说大家能不能明白(就知道你没明白，看下面的图。)

React Navigation Bug.gif

下面来说下解决办法吧：

通过自己处理Back键的方式解决。

import React from "react";
import {Component} from "react";
import {Platform, BackHandler} from "react-native";

export class FixedComponent extends Component {

    _didFocusSubscription;

    /**
     * 该函数整个过程中只执行一次,在第一次绘制render()之后。在此函数就可以做交互，例如设置计时 setTimeout 或者 setInterval，或者发起网络请求
     */
    componentDidMount() {
        //如果是Android设备则注册监听。
        if (Platform.OS === 'android') {
            this._didFocusSubscription = this.props.navigation.addListener('didFocus', payload =>
                BackHandler.addEventListener('hardwareBackPress', () => this.onAndroidBackPressed())
            );
        }
    }

    /**
     * 此方法在组件销毁时调用。在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等
     */
    componentWillUnmount() {
        //如果是Android设备则移除监听。
        if (Platform.OS === 'android') {
            this._didFocusSubscription && this._didFocusSubscription.remove();
        }
    }

    /**
     * 当Android上的物理返回键被点击的时候调用。
     * @returns {boolean} 如果希望自己处理返回键则需要重写该方法，并返回true，如果返回false则表示自己不处理返回键。
     */
    onAndroidBackPressed () {
        this.props.navigation.goBack();
        return true;
    };
}

通过上面的方式自己处理返回键就可以解决这个Bug。下面是解决之后的效果。

FixedRNBug.gif

如果我帮你解决了问题，请给个爱心(收藏)哟！！！