React native react native componentWillUnmount导航时不工作

我正在做这个简单的步骤，但卸载没有调用我不知道为什么。请我需要一个解决方案，我需要卸载被调用，同时导航到另一个屏幕

class Homemain extends Component {
    constructor(props) {
        super(props);
    }

    componentWillMount(){
        alert('willMount')
    }
    componentDidMount(){
        alert('didMount')
    }
    componentWillUnmount(){
        alert('unMount')
    }
    Details = () => {
        this.props.navigation.navigate('routedetailsheader')
    }

    render() {
        return(
            <View style={styles.container}>
                <TouchableOpacity onPress={() => this.Details()} style={{ flex: .45, justifyContent: 'center', alignItems: 'center', marginTop: '10%', marginRight: '10%' }}>
                    <Image
                        source={require('./../Asset/Images/child-notification.png')}
                        style={{ flex: 1, height: height / 100 * 20, width: width / 100 * 20, resizeMode: 'contain' }} />
                    <Text
                        style={{ flex: 0.5, justifyContent: 'center', fontSize: width / 100 * 4, fontStyle: 'italic', fontWeight: '400', color: '#000', paddingTop: 10 }}>Details</Text>
                </TouchableOpacity>
            </View>
        );
    }
}
export default (Homemain);

class Homemain扩展组件{
建造师（道具）{
超级（道具）；
}
组件willmount（）{
警报（'willMount'）
}
componentDidMount（）{
警报（'didMount'）
}
组件将卸载（）{
警报（“卸载”）
}
详情=（）=>{
this.props.navigation.navigate（'routedtailsheader'））
}
render（）{
返回(
this.Details（）}style={{{flex:.45，justifyContent:'center'，alignItems:'center'，marginTop:'10%'，marginRight:'10%}>
细节
);
}
}
导出默认值（Homemain）；

这是我的路线配置，这样我就可以导航到下一个屏幕。有人能帮我解决这个错误吗？这样我就可以继续下一步了

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { addNavigationHelpers, NavigationActions } from 'react-navigation';
import { connect } from 'react-redux';
import { BackHandler } from 'react-native';
import { Stack } from './navigationConfiguration';

const getCurrentScreen = (navigationState) => {
  if (!navigationState) {
    return null
  }
  const route = navigationState.routes[navigationState.index]
  if (route.routes) {
    return getCurrentScreen(route)
  }
  return route.routeName
}
class StackNavigation extends Component {
  static propTypes = {
    dispatch: PropTypes.func.isRequired,
    navigation: PropTypes.shape().isRequired,
  };

  constructor(props) {
    super(props);
    BackHandler.addEventListener('hardwareBackPress', this.backAction);
  }

  //backAction = () => this.navigator.props.navigation.goBack();

  backAction = () => {
    const { dispatch, navigation } = this.props;
    const currentScreen = getCurrentScreen(navigation)

    if (currentScreen === 'Homemain') {
      return false
    }
    else
      if (currentScreen === 'Login') {
        return false
      }

    dispatch(NavigationActions.back());
    return true;
  };

  render() {
    const { dispatch, navigation } = this.props;

    return (
      <Stack
        ref={(ref) => { this.navigator = ref; }}
        navigation={
          addNavigationHelpers({
            dispatch,
            state: navigation,
          })
        }
      />
    );
  }
}

export default connect(state => ({ navigation: state.stack }))(StackNavigation);

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从“react navigation”导入{addNavigationHelpers，NavigationActions}；
从'react redux'导入{connect}；
从“react native”导入{BackHandler}；
从“/navigationConfiguration”导入{Stack}；
常量getCurrentScreen=（导航状态）=>{
如果（！navigationState）{
返回空
}
const route=navigationState.routes[navigationState.index]
if（route.routes）{
返回getCurrentScreen（路由）
}
返回路径.routeName
}
类StackNavigation扩展组件{
静态类型={
调度：需要PropTypes.func.isRequired，
导航：需要PropTypes.shape（）.isRequired，
};
建造师（道具）{
超级（道具）；
BackHandler.addEventListener（'hardwareBackPress'，this.backAction）；
}
//backAction=（）=>this.navigator.props.navigation.goBack（）；
反作用=（）=>{
const{dispatch，navigation}=this.props；
const currentScreen=getCurrentScreen（导航）
如果（currentScreen==='Homemain'）{
返回错误
}
其他的
如果（currentScreen===“登录”）{
返回错误
}
分派（NavigationActions.back（））；
返回true；
};
render（）{
const{dispatch，navigation}=this.props；
返回(
{this.navigator=ref；}}
航行={
添加导航帮助程序({
派遣，
国家：导航，
})
}
/>
);
}
}
导出默认连接（state=>（{navigation:state.stack}））（StackNavigation）；

如果使用堆栈导航器，则路由到新视图会在旧视图的上方加载新视图。当您返回时，旧视图仍在那里

路由到新屏幕不会卸载当前屏幕

对于您的用例，您不需要在componentWillUnmount中编写代码，您可以在调用navigate in Details本身后继续编写代码

---

如果您在新屏幕上按back返回当前屏幕时正在查找回调。使用

中所示的goBack，我从您的问题和代码中了解到，您正在使用redux进行导航，并希望卸载屏幕。所以我所做的只是在另一个组件中添加了一个屏幕组件，使我的屏幕组件成为子组件

e、 g.下面是我用来从

PushedData

组件中卸载

PushScreen

的代码片段

我渲染了

，其中有一个组件

PushedData

，它最初创建了视图。在

PushedData

`组件将挂载时，我只是在执行一些条件功能，如果成功，我只是从PushScreen卸载PushData

class PushScreen extends Component{
    state ={ controllerLaunched: false };

    updateControllerLauncher = () => {
        this.setState({ controllerLaunched: true });
    }

    render (){
        if(this.state.controllerLaunched){
            return null;
        } else {
            return <PushedData handleControllerLauncher={this.updateControllerLauncher} />;
        }
    }
}

class PushedData extends Component{
    componentWillMount(){

        this.unmountPushData();//calling this method after some conditions.
    }

    unmountPushData = () => {
        this.props.handleControllerLauncher();
    }

    render(){
        return (
            <View><Text>Component mounted</Text></View>
        );
    }
}

类推屏扩展组件{
状态={controllerLaunched:false}；
updateControllerLauncher=（）=>{
this.setState（{controllerLaunched:true}）；
}
渲染（）{
if（this.state.controllerLaunched）{
返回null；
}否则{
返回；
}
}
}
类PushedData扩展组件{
组件willmount（）{
this.unmountPushData（）；//在某些条件下调用此方法。
}
卸载数据=（）=>{
this.props.handleControllerLauncher（）；
}
render（）{
返回(
组件安装
);
}
}

---

如果您需要更多信息，请告诉我。

您可以为您为硬件按钮编写的costment函数设置条件，例如当（例如React Native Router Flux）执行

操作时。currentScene===“Home”

执行您想要的操作或其他条件。

如果您想进入下一屏幕，请使用（.替换。导航）如果您想调用componentWillUnmount。如果您想返回到以前的屏幕之一，请使用.pop或.poptoop。

当您使用Stack Navigator时，然后路由到新视图，如Rob Walker所说，在旧视图的上方加载新视图。有一个解决方法。您可以在componentDidMount模糊事件侦听器ng>使用导航道具：

componentDidMount（）{
this.props.navigation.addListener（'blur'，（）=>{
警报（“屏幕更改”）；
})
}

因此，当屏幕失去焦点时，将调用事件侦听器。

---

您可以找到更多关于事件的信息。

请在问题中包括您的路线代码我已更新路线配置-@Shahzad MirzaI表示您用于从此处导入的路线配置的

堆栈
/navigationConfiguration
这是我在navigationConfiguration中所做的-------routedetailsheader:{屏幕：routedetailsheader，导航选项：（{navigation}）=>（{header:null，}），是的，我正在使用