android页面跳转闪退,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

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