react-native 初始页面添加双击退出，跳转到其他页面也触发双击退出函数问题

今天在使用react-native BackHandler绑定双击退出时，遇到一个大坑，在使用react-navigation时，初始页面绑定双击退出函数，在页面卸载时删除绑定函数，代码如下：

const lastBackPressed = Date.now();
export default class HomepageIndexPage extends Component{
  ...

  //组件加载之后添加监听
  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.onBackPressed);
  }

  //组件卸载之前移除监听
  componentWillUnmount() {
     BackHandler.removeEventListener('hardwareBackPress', this.onBackPressed);
  }

  /* 再按一次退出函数，仅支持android */
  _onBackPressed() {
    if (lastBackPressed && lastBackPressed + 2000 >= Date.now()) {
      BackHandler.exitApp();
    }
    lastBackPressed = Date.now();
    ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);
    return true;
   }
...
}

但当我从这个初始页面，跳转到其他页面的时候，坑来了，点击Home建同样会触发，onBackPressed函数，提示 ‘再按一次退出应用’。并不是我预想的返回到上一个页面，顿时一脸懵逼。这他妈是没有触发，componentWillUnmount函数啊！！！
左思右想，终于想明白了，这是因为，我们从初始页面跳转到其他页面的时候，react-navigation把这个初始页面存了起来，而不是把他销毁掉，就像是路由跳转的路线点一样存储起来，这样我们在使用goBack()函数的时候才能回到上一个路由节点，知道了原因，也就好下手了，只要我们路由节点只有初始的一个的时候监听双击退出函数，在多余一个的时候删除监听的函数，就OK了。
现在我们需要找一个，只要路由变化就触发的函数，而且在这个函数中能够获取到路由节点个数，这个函数就是 onNavigationStateChange 函数。这个函数是导航器所支持的是三个props之一（其余两个是ref和screenProps），以下是我的代码

const lastBackPressed = Date.now();
export default class HomepageIndexPage extends Component{
  ...

  //组件加载之后添加监听
  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.onBackPressed);
  }

  //组件卸载之前移除监听
  componentWillUnmount() {
     BackHandler.removeEventListener('hardwareBackPress', this.onBackPressed);
  }

  /* 再按一次退出函数，仅支持android */
  _onBackPressed() {
    if (lastBackPressed && lastBackPressed + 2000 >= Date.now()) {
      BackHandler.exitApp();
    }
    lastBackPressed = Date.now();
    ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);
    return true;
  }

  render(){
    return (
      <View style={{flex:1}}>
        <StackNavigation
          screenProps={{isLogin:this.props.isLogin}}
          ref={nav => { navigation = nav }}
          onNavigationStateChange = {(prevState, newState, action) => {
            if (newState.routes.length > 1) {
              BackHandler.removeEventListener('hardwareBackPress', this.onBackPressed);
            } else {
              BackHandler.addEventListener('hardwareBackPress', this.onBackPressed);
            }
          }}
        / >
      </View>
    )
  }
}

就这样又踩过了一个坑！！！