Question

这是我的AppNavigator.js：

const unChosenDeviceAppStack = createStackNavigator({
  DevicesList: {
      screen: DevicesList,
     },
},
);

const chosenDeviceAppStack = createStackNavigator({
  HomeScreenPage: {
   screen: HomeScreen,
  },
);

有一个Loading文件，它决定启动时要浏览的页面（考虑到它导航到HomescreenPage）。

DeviceLists中的每个设备都有唯一的HomeScreenPage

问题：

app在启动时导航到HomescreenPage，然后我导航到DeviceList，然后再次在其中选择一个设备，然后它再次导航到HomescreenPage。关键是HomescreenPage尚未卸载！！！它呈现与启动时相同的页面。

我希望从HomescreenPage导航到DeviceLists（位于另一个stack中）时，首页会被卸载，但不会发生！

有人可以告诉我到底发生了什么吗？以及在再次导航到该页面时如何卸载该页面并完全重新呈现它。

Answer 1

与组件的经典reactjs生命周期不同，带有 react native 的反应导航的工作方式不同。从屏幕A导航到屏幕B时，不会卸载屏幕A。您可以在此处获得完整的解释：https://reactnavigation.org/docs/en/navigation-lifecycle.html

如何解决这个问题？

您可以仅在特定屏幕上收听 didFocus / willFocus 事件并触发某种状态更改（这将使您的屏幕重新呈现）。

// add listener here
componentDidMount () {
  this.focusListener = this.props.navigation.addListener('didFocus', () => {
    // do some magic here and change state
  }
}

// don't forget to remove the listener
componentWillUnmount () {
  this.focusListener.remove() 
}

React导航页面未卸载

1 个答案: