当我从其他屏幕导航到初始路由时，为什么 componentDidMount 不执行？

Question

我正在为我的移动应用程序使用 react-navigation，我有 2 条路线 - Home 和 Favoriti，其中 Home 是初始路线。这两个组件都有 componentDidMount。每当我从 Home 导航到 Favoriti 时，Favoriti 组件都会安装，但是当我导航回 Home 时，它的 componentDidMount 不会执行。它只在我第一次打开应用程序时执行，但每次导航到它时我都需要挂载它。

import { createStackNavigator, createAppContainer} from 'react-navigation';
import  Home  from './views/Home';
import Favoriti from './views/Favoriti';

const MainNavigator = createStackNavigator({

    FavoritiRT: Favoriti,
    HomeRT: Home
  },
  {
    initialRouteName: "HomeRT"
  }
);

const MyRoutes = createAppContainer(MainNavigator);

export default MyRoutes;

没有显示任何错误，只是初始路由的 componentDidMount 不会在我每次导航到它时都执行，但在其他路由中会执行。

Answer 1

"componentDidMount" 不会再次运行因为 "Home" 组件已经创建并且只要它在堆栈中就会继续存在。 Home 组件的那个实例将被重用，当用户返回到该 Home 组件时，他们将从他们离开的地方继续。要再次运行 componentDidMount，您需要启动 Home 组件的新实例。

而不是使用后退按钮。创建一个按钮并在 onPress 属性中使用 push 方法导航到 Home 的新实例。

<Button
  title="Home"
  onPress={() => this.props.navigation.push('Home')}
/>

https://reactnavigation.org/docs/en/navigating.html#going-back

编辑：

虽然这将使您的应用程序暂时运行ning； sfratini 提出了一个很好的观点，如果您最终为 company/client 工作或发布您自己的应用程序，他的回答将对您更好。出于他所说的所有原因，添加一个监听器是理想的选择。

Answer 2

Raymond 的回答应该有效，解释也是一样的。 ComponentDidMount 仅运行一次，并且无需再次运行，因为您的堆栈中有 Home。

我建议在 componentWillReceiveProps 上添加一个侦听器，当主屏幕再次加载时它也应该触发，您可以查看是否需要刷新或重新加载屏幕。

当然，这取决于您的用例。如果你一直将主屏幕推到堆栈上，唯一的缩减是一旦用户到达主页，通常后退按钮应该表示 "leaving the app" 并且如果你将它推到堆栈上然后按下返回，你就会去退一屏。这是糟糕的用户体验，但如果它对你有用，那很好。

当我从其他屏幕导航到初始路由时，为什么 componentDidMount 不执行？

Why does componentDidMount not execute when I navigate to initial route from other screen?

javascript

navigation

android-lifecycle

react-native

react-native-android