React Navigation：组件未在弹出或后退按钮上卸载 #5775答案

【问题标题】：React Navigation: Component is not being unmounted on pop or back button #5775React Navigation：组件未在弹出或后退按钮上卸载 #5775
【发布时间】：2019-04-06 00:49:23
【问题描述】：

当我从包含公司列表的主页组件导航并按下按钮以加载公司视图时遇到问题，正在加载数据，但是当我在 Android 中按下返回时返回主页时我按下不同的公司按钮来加载其详细信息，使用相同的先前数据呈现相同的视图，这意味着组件没有被更新/卸载。

这些是我的路线

const drawerConfig = {
  initialRouteName: 'Home',
  contentComponent: SideMenu,
  drawerWidth: width,
}

const MainDrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: Home,
    },
    Company: {
      screen: Company,
    },
    Gifts: {
      screen: Gifts,
    },
    Contact: {
      screen: Contact
    }
  },
  drawerConfig,
);

const InitialStack = createStackNavigator(
  {
    Menu: {
      screen: Menu,
      path: 'menu/',
    }
  },
  {
    initialRouteName: 'Menu',
    headerMode: 'none',
  }
);

const SwitchNavigator = createSwitchNavigator(
  {
    Init: InitialStack,
    App: MainDrawerNavigator,
  },
  {
    initialRouteName: 'Init',
  }
);

const AppContainer = createAppContainer(SwitchNavigator);

export default AppContainer;

我正在用这个从家导航到公司

goToCompany = company => event => {
    this.props.navigation.navigate('Company', {
      company,
    });
  }

并以此接收公司中的参数

componentWillMount() {
    this.setState({ companyData: this.props.navigation.getParam('company', {}) });
}

所以我希望 Company 组件会在弹出时卸载或允许我在从 Home 发送详细信息时更改 Company 组件的状态。

我正在使用 react-navigation 3.5.1 和 react-native 0.59.3

【问题讨论】：

标签： javascript reactjs react-native react-navigation

【解决方案1】：

React 原生导航不能像 web 一样工作。阅读此处了解更多详情。 https://reactnavigation.org/docs/en/navigation-lifecycle.html

当您导航到其他屏幕时，它实际上并没有被卸载。阅读文档了解详情。

请改用willFocus。

【讨论】：

【解决方案2】：

你可以试试componentDidUpdatecheck in docs

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

【讨论】：

我尝试了类似的方法，但出现了一些警告，谢谢！

【解决方案3】：

您需要使用导航对象的推送方法。推送将当前路线替换为新路线，导航搜索路线，如果不存在则创建新路线。

【讨论】：