Question

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

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，这样我导航到下一个屏幕。有人可以帮我解决这个错误，以便我可以继续下一步

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

Answer 1

如果您使用的是堆栈导航器，则路由到新视图会将新视图加载到旧视图之上。当您导航回来时，旧视图仍然存在。

Answer 2

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

为了使用你而不是在componentWillUnmount中编写代码，你可以在调用导航详细信息本身后继续编写它。

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

所示

Answer 3

正如我从您的问题和代码中了解到的那样，您正在使用带导航的redux并想要卸载屏幕。所以我做了什么我只是在另一个组件中添加了一个屏幕组件，以使我的屏幕组件成为孩子。

e.g。以下是我用于从PushScreen组件中卸载PushedData的代码段。

我渲染 PushScreen ，其中包含最初生成视图的 PushedData 组件。在 PushedData `componentWillMount我只是在做一些条件功能，并且在成功时我只是从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>
        );
    }
}

如果您需要更多信息，请与我们联系。

Answer 4

您可以为您为硬件按钮编写的服装功能设置条件，例如（例如，对于 React Native Router Flux）Actions.currentScene === 'Home'或您想要的其他条件。

Answer 5

如果要转到下一个屏幕，请在要调用componentWillUnmount的位置使用.replace代替.navigate。如果您想返回上一个屏幕，请使用.pop或.popToTop。

Answer 6

当您使用 Stack Navigator 时，路由到新视图会加载旧视图上方的新视图，正如 Rob Walker 所说。有一个解决方法。您可以使用 navigation 道具在 componentDidMount 上绑定 blur 事件侦听器：

componentDidMount() {
    this.props.navigation.addListener('blur', () => {
        alert('screen changed');
    })
}

因此，当您的屏幕失去焦点时，将调用事件侦听器。您可以在 here 处找到有关活动的更多信息。

react-native componentWillUnmount在导航时不起作用

6 个答案: