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

Question

当我从包含公司列表的Home组件导航时出现问题，我按下按钮加载公司视图，数据正在加载但是当我在Android中按回来时返回Home并且当我按下时用于加载其详细信息的另一个公司按钮，使用相同的先前数据呈现相同的视图，这意味着该组件未被更新/卸载。

这些是我的路线

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', {}) });
}

所以我期待公司组件将在pop上卸载或允许我在从Home发送详细信息时更改公司组件的状态。

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

Answer 1

React原生导航不能用作Web。请阅读此处了解更多详情。 https://reactnavigation.org/docs/en/navigation-lifecycle.html

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

请改用willFocus。

Answer 2

你可以尝试使用componentDidUpdate check in docs

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

Answer 3

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