Question

当我从包含公司列表的Home组件导航时，当我按一个按钮以加载Company视图时，我正在遇到问题，正在加载数据，但是当我在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', {}) });
}

因此，我希望从首页发送详细信息时，公司组件会突然弹出或允许我更改公司组件的状态。

我正在使用反应导航3.5.1 和反应本地0.59.3

Answer 1

反应式本机导航不适用于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

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

反应导航：弹出或后退按钮上未卸载组件＃5775

3 个答案: