react-native componentWillUnmount 在导航时不起作用 [英] react-native componentWillUnmount not working while navigating

问题描述

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

I am doing this simple steps but unmount was not calling I don't know why. Please I need a solution for this I need unmount to be get called while navigating to another screen...

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);

这是我的 RouteConfiguration，我将导航到下一个屏幕.有人可以帮我解决这个错误，以便我可以继续下一步

This is my RouteConfiguration in this way I am navigating to the next screen. Can someone please help me for this error so that i can proceed to the next steps

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);

推荐答案

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

Routing to a new screen does not unmount the current screen.

对于您的用例，您无需在 componentWillUnmount 中编写代码，您可以在调用 Details 中的导航后继续编写代码.

For you usecase you instead of writing the code in componentWillUnmount you can continue by writing it after calling navigate in Details itself.

如果您在从新屏幕按返回键返回当前屏幕时正在寻找回调.使用 goBack，如 https://github.com 中所示/react-navigation/react-navigation/issues/733

If you are looking for a callback when you press back from the new screen to come back to the current screen. Use goBack as shown in https://github.com/react-navigation/react-navigation/issues/733

这篇关于react-native componentWillUnmount 在导航时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！